Coinbase Pay does not compile, missing babel loader

I'm trying to integrate with the coinbase pay sdk. I've created a button using their examples, however when trying to build I'm getting an issue Internal to their SDK

When trying to build my code I get an error internal to the `@coinbase/cbpay-js sdk

```
./node_modules/@coinbase/cbpay-js/dist/index.mjs 135:34
Module parse failed: Unexpected token (135:34)
File was processed with these loaders:
* ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
var isMobileSdkTarget = /* @__PURE__ */__name(win => {
try {
> return win.ReactNativeWebView?.postMessage !== void 0;
} catch {
return false;
```

This is my package.json:

```
{
"name": "React App",
"version": "0.1.0",
"private": true,
"devDependencies": {
"@arkane-network/web3-arkane-provider": "^0.23.0",
"@ethersproject/experimental": "^5.4.0",
"@gelatonetwork/limit-orders-react": "^2.4.0",
"@gnosis.pm/safe-apps-sdk": "^4.0.0",
"@reduxjs/toolkit": "^1.3.5",
"@transak/transak-sdk": "^1.0.28",
"@types/jest": "^25.2.1",
"@types/lodash.flatmap": "^4.5.6",
"@types/multicodec": "^1.0.0",
"@types/node": "^13.13.5",
"@types/qs": "^6.9.2",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-redux": "^7.1.8",
"@types/react-router-dom": "^5.1.8",
"@types/react-slick": "^0.23.7",
"@types/react-virtualized-auto-sizer": "^1.0.1",
"@types/react-window": "^1.8.5",
"@types/styled-components": "^5.1.15",
"@types/testing-library__cypress": "^5.0.5",
"@typescript-eslint/eslint-plugin": "^5.3.1",
"@typescript-eslint/parser": "^5.3.1",
"@uniswap/governance": "^1.0.2",
"@uniswap/liquidity-staker": "^1.0.2",
"@uniswap/merkle-distributor": "1.0.1",
"@uniswap/sdk": "npm:quickswap-sdk@3.0.8",
"@uniswap/token-lists": "npm:quickswap-token-lists@1.0.1",
"@uniswap/v2-core": "1.0.0",
"@uniswap/v2-periphery": "^1.1.0-beta.0",
"@web3-react/core": "6.0.9",
"@web3-react/injected-connector": "6.0.7",
"@web3-react/ledger-connector": "6.1.9",
"@web3-react/portis-connector": "6.0.9",
"@web3-react/walletconnect-connector": "6.2.4",
"@web3-react/walletlink-connector": "6.2.3",
"ajv": "^6.12.3",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link-http": "^1.5.17",
"cids": "^1.1.9",
"copy-to-clipboard": "^3.2.0",
"cypress": "^7.7.0",
"eslint": "^7.11.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^4.0.0",
"ethers": "^5.0.7",
"fortmatic": "^2.2.1",
"graphql": "^15.5.1",
"graphql-tag": "^2.12.5",
"hamburger-react": "^2.4.1",
"i18next": "^20.4.0",
"i18next-browser-languagedetector": "^6.1.2",
"ipfs-deploy": "^11.1.0",
"lodash.flatmap": "^4.5.0",
"multicodec": "^3.0.1",
"multihashes": "^3.0.1",
"polished": "^3.3.2",
"prettier": "^1.17.0",
"qs": "^6.9.4",
"react": "^17.0.2",
"react-app-rewired": "^2.1.8",
"react-device-detect": "^1.6.2",
"react-dom": "^17.0.2",
"react-feather": "^2.0.8",
"react-i18next": "^11.11.4",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-virtualized-auto-sizer": "^1.0.6",
"react-window": "^1.8.6",
"redux-localstorage-simple": "^2.4.1",
"serve": "^11.3.2",
"source-map-explorer": "^2.5.2",
"start-server-and-test": "^1.11.0",
"typescript": "^4.1.2",
"web3": "^1.7.0"
},
"resolutions": {
"yargs-parser": "^13.1.2",
"underscore": "^1.12.1",
"lodash": "^4.17.21",
"trim-newlines": "^3.0.1",
"nth-check": "^2.0.1",
"node-fetch": "^2.6.7",
"follow-redirects": "^1.14.8",
"axios": "^0.21.2",
"immer": "^9.0.6",
"ansi-html": "^0.0.8",
"node-forge": "^1.3.0",
"glob-parent": "^5.1.2",
"browserslist": "^4.16.5",
"ajv": "^6.12.3",
"async": "^3.2.2",
"ejs": "^3.1.7",
"cross-fetch": "^3.1.5",
"eventsource": "^2.0.2",
"protobufjs": "^6.11.3",
"shell-quote": "^1.7.3",
"terser": "^4.8.1",
"got": "^11.8.5",
"jpeg-js": "^0.4.4"
},
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "react-app-rewired start",
"build": "CI=false react-app-rewired --max_old_space_size=4096 build",
"test": "react-app-rewired test --env=jsdom",
"format": "prettier --write \"**/*.{ts,js,tsx,json,md}\"",
"eject": "react-scripts eject",
"integration-test": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run'",
"ipfs-deploy": "ipfs-deploy build"
},
"eslintConfig": {
"extends": "react-app",
"ignorePatterns": [
"node_modules"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"license": "GPL-3.0-or-later",
"dependencies": {
"@coinbase/cbpay-js": "^1.6.0",
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"apexcharts": "3.32.1",
"i18next-http-backend": "^1.4.1",
"market-sdk": "^2.2.0",
"react-apexcharts": "1.3.9",
"react-cool-inview": "^2.0.8",
"react-ga": "^3.3.0",
"react-query": "^3.34.19",
"react-reflex": "^4.0.6",
"react-slick": "^0.28.1",
"react-virtuoso": "^2.8.4",
"sass": "^1.51.0",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.3"
}
}
```

config-overrides.js

```
module.exports = {
// The function to use to create a webpack dev server configuration when running the development
// server with 'npm run start' or 'yarn start'.
// Example: set the dev server to use a specific certificate in https.
devServer: function(configFunction) {
// Return the replacement function for create-react-app to use to generate the Webpack
// Development Server config. "configFunction" is the function that would normally have
// been used to generate the Webpack Development server config - you can use it to create
// a starting configuration to then modify instead of having to create a config from scratch.
return function(proxy, allowedHost) {
// Create the default config by calling configFunction with the proxy/allowedHost parameters
const config = configFunction(proxy, allowedHost);

config.headers = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Headers':
'X-Requested-With, content-type, Authorization',
};

// Return your customised Webpack Development Server config.
return config;
};
},
webpack: function(config, env) {
config.optimization.splitChunks = {
cacheGroups: {
default: false,
},
};
config.optimization.runtimeChunk = false;

config.module.rules = [
{
test: /node_modules\/@coinbase\/cbpay-js/,
use: {
loader: 'babel-loader',
// if you include your babel config here,
// you don’t need the `babel.config.json` file
options: { presets: ['@babel/preset-env'] }
}
},
...config.module.rules
]
return config;
}
};
```

I'm guessing I'm missing a dependecy for a babel loader or something, but I'm not sure how to figure out which one I need?