集成Coinbase Pay SDK构建失败：疑似缺失Babel Loader相关依赖

问题描述 #

我正在集成Coinbase Pay SDK，按照官方示例创建了功能按钮，但构建时出现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/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;

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"}}

补充： 配置覆盖文件内容如下：

const {paths} = require('react-app-rewired');
// load environment variables from .env files
// before overrides scripts are read
require(paths.scriptVersion + '/config/env');
const override = require(paths.configOverrides);

const webpack = typeof override === 'function'
  ? override
  : override.webpack || ((config, env) => config);

if (override.devserver) {
  console.log(
    'Warning: `devserver` has been deprecated. Please use `devServer` instead as ' +
    '`devserver` will not be used in the next major release.'
  )
}

const devServer = override.devServer || override.devserver
  || ((configFunction) =>
    (proxy, allowedHost) =>
      configFunction(proxy, allowedHost));

const jest = override.jest || ((config) => config);

const pathsOverride = override.paths || ((paths, env) => paths);

// normalized overrides functions
module.exports = {
  webpack,
  devServer,
  jest,
  paths: pathsOverride
};

我推测缺失Babel Loader相关依赖，但不确定具体需要安装哪一个，寻求解决该构建错误的方案。

解决方案 #

报错中的?.是可选链操作符，你的React Scripts版本（4.0.3）默认Babel配置未处理该语法，且@coinbase/cbpay-js的ES模块输出未转译该语法，导致Webpack无法解析。

步骤1：安装Babel插件 #

无需额外安装loader，只需安装支持可选链的Babel插件：

npm install @babel/plugin-proposal-optional-chaining --save-dev

步骤2：修改Webpack配置 #

在项目根目录创建config-overrides.js（若已存在则修改），添加以下内容让Webpack对@coinbase/cbpay-js进行Babel转译：

module.exports = function override(config, env) {
  const oneOfRule = config.module.rules.find(rule => rule.oneOf);
  if (oneOfRule) {
    oneOfRule.oneOf.unshift({
      test: /\.m?js$/,
      include: /node_modules\/@coinbase\/cbpay-js/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['react-app'],
          plugins: ['@babel/plugin-proposal-optional-chaining']
        }
      }
    });
  }
  return config;
};

步骤3：重新构建 #

运行构建命令：

npm run build

替代方案：升级React Scripts #

若上述方法无效，可升级React Scripts到v5+版本，新版本默认支持可选链等现代JS语法，无需额外配置：

npm install react-scripts@latest --save-dev

注意升级后需检查react-app-rewired等依赖的兼容性，可能需要调整其他配置。

内容的提问来源于stack exchange，提问作者Ritzy Dev