cbpay-js
cbpay-js copied to clipboard
Published
20 hours ago •
coinbase
coinbase
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:[email protected]",
"@uniswap/token-lists": "npm:[email protected]",
"@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?
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:[email protected]", "@uniswap/token-lists": "npm:[email protected]", "@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 ne
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 ne
Have you found a solution to this by chance?
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 ne
Have you found a solution to this by chance?
try
import ... from '@coinbase/cbpay-js/dist/index.js'
instead '@coinbase/cbpay-js
it will get .mjs by default, based on the exports in package.json
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.mjs",
"require": "./dist/index.js",
"default": "./dist/index.js"
},
...
}
but somehow it occurred the same issue even I tried require
it works for me in vue-cli with vue2.6
No idk what the hell I'm doing lol I need to figure this all out On Thursday, March 23, 2023 at 10:41:21 PM MDT, Nick Lin @.***> wrote:
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 ne
Have you found a solution to this by chance?
try import ... from @.***/cbpay-js/dist/index.js'
instead @.***/cbpay-js
it will get .mjs by default, based on the exports in package.json "exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", "require": "./dist/index.js", "default": "./dist/index.js" }, ... }
but somehow it occurred the same issue even I tried require
it works for me in vue-cli with vue2.6
— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>
How do I get money from this On Thursday, March 23, 2023 at 10:41:21 PM MDT, Nick Lin @.***> wrote:
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 ne
Have you found a solution to this by chance?
try import ... from @.***/cbpay-js/dist/index.js'
instead @.***/cbpay-js
it will get .mjs by default, based on the exports in package.json "exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", "require": "./dist/index.js", "default": "./dist/index.js" }, ... }
but somehow it occurred the same issue even I tried require
it works for me in vue-cli with vue2.6
— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>
I really don't know what I'm doing so if you could help me out with the madness that would be great 👍
Urica Matthews
On Fri, Mar 24, 2023, 12:41 AM Nick Lin @.***> wrote:
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 ne
Have you found a solution to this by chance?
try
import ... from @.***/cbpay-js/dist/index.js'
instead @.***/cbpay-js
it will get .mjs by default, based on the exports in package.json
"exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", "require": "./dist/index.js", "default": "./dist/index.js" }, ... }
but somehow it occurred the same issue even I tried require
it works for me in vue-cli with vue2.6
— Reply to this email directly, view it on GitHub https://github.com/coinbase/cbpay-js/issues/65#issuecomment-1482240217, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIPPNIEZXFLJU3KLAV6CXE3W5UQXBANCNFSM6AAAAAAR3WI6H4 . You are receiving this because you commented.Message ID: @.***>
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:[email protected]", "@uniswap/token-lists": "npm:[email protected]", "@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?