Billiej88
commented
1 year ago Coinb
Open webdev403 opened 1 year ago
Billiej88
commented
1 year ago Coinb
Billiej88
commented
1 year ago Hmmm
urica12
commented
1 year ago 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 ne
titusdecali
commented
1 year ago I have the exact same issue in Vue3 with webpack (non vite).
titusdecali
commented
1 year ago 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?
unickhow
commented
1 year ago 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
Billiej88
commented
1 year ago 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: @.***>
Billiej88
commented
1 year ago 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: @.***>
urica12
commented
1 year ago 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: @.***>
urica12
commented
1 year ago 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?
Billiej88
commented
9 months ago
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
This is my package.json:
config-overrides.js
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?