如何解决React项目中需额外安装Loader的模块解析错误？

环境与问题 #

• 系统：Ubuntu 22.04.2 LTS x86_64
• 项目依赖：react-scripts@4.0.1、yarn@3.2.0
• 问题：执行yarn start启动项目时，出现模块解析错误，无法正常启动，错误指向@toruslabs/torus-embed中的可选链操作符error?.stack未被Babel处理

已尝试的无效方案 #

• 降级Node版本至14.21.3
• 安装babel-plugin-syntax-optional-chaining插件

错误信息 #

./node_modules/@web3-react/torus-connector/node_modules/@toruslabs/torus-embed/dist/torus.esm.js 639:12
Module parse failed: Unexpected token (639:12)
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.
| function logStreamDisconnectWarning(remoteLabel, error, emitter) {
|   var warningMsg = "MetaMask: Lost connection to \""".concat(remoteLabel, "\"").replace(/"/g, "\\"");
>   if (error?.stack) {
|     warningMsg += "\n".concat(error.stack);
|   }

package.json内容 #

{
  "name": "",
  "version": "2.0.0",
  "repository": "",
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@apollo/client": "^3.5.10",
    "@babel/plugin-proposal-numeric-separator": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
    "@davatar/react": "^1.8.1",
    "@ethersproject/providers": "^5.4.1",
    "@fortawesome/fontawesome-svg-core": "~1.2.32",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.58",
    "@pancakeswap/sdk": "^2.4.0",
    "@reduxjs/toolkit": "^1.4.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@toruslabs/torus-embed": "1.36.3",
    "@types/humanize-plus": "^1.8.0",
    "@types/jest": "^26.0.9",
    "@types/node": "^14.0.27",
    "@types/react": "^16.9.46",
    "@types/react-helmet": "^6.1.5",
    "@types/react-redux": "^7.1.9",
    "bignumber.js": "^9.0.0",
    "clsx": "^1.1.1",
    "ethers": "^5.4.1",
    "graphql": "^15.0.0",
    "material-ui-image": "^3.3.2",
    "moment": "^2.29.1",
    "node-sass": "^7.0.1",
    "numeral": "^2.0.6",
    "react": "^16.13.1",
    "react-circular-progressbar": "^2.0.3",
    "react-countdown": "^2.2.1",
    "react-countup": "^4.3.3",
    "react-dom": "^16.13.1",
    "react-feather": "^2.0.8",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.3.1",
    "react-loading-skeleton": "^2.1.1",
    "react-modal-video": "^1.2.8",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.1",
    "react-spring": "^8.0.27",
    "redux-localstorage-simple": "^2.3.1",
    "styled-components": "^5.1.1",
    "typescript": "^4.1.6",
    "use-wallet": "OGBoogieTomb/use-wallet",
    "web3": "^1.2.11"
  },
  "resolutions": {
    "@web3-react/walletconnect-connector": "6.2.8",
    "@babel/preset-env": "7.5.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "CI= GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "devDependencies": {
    "@types/numeral": "0.0.28",
    "@types/react-dom": "^16.9.8",
    "@types/react-router-dom": "^5.1.5",
    "@types/styled-components": "^5.1.2",
    "babel-plugin-syntax-optional-chaining": "^7.0.0-alpha.13",
    "prettier": "2.3.1"
  },
  "packageManager": "yarn@3.2.0"
}

解决方案 #

方案一：移除旧版Babel preset锁定（推荐） #

1. 打开package.json，删除resolutions中的"@babel/preset-env": "7.5.5"配置项
2. 执行yarn install重新安装依赖
3. 运行yarn start启动项目

原因：你锁定的@babel/preset-env@7.5.5版本不支持ES2020的可选链操作符，而react-scripts@4默认依赖的Babel版本原生支持该语法，强制降级导致解析失败。

方案二：配置Babel转译第三方包（若无法移除resolutions） #

1. 安装依赖：

yarn add --dev react-app-rewired customize-cra

2. 在项目根目录创建config-overrides.js文件，写入以下内容：

const { override, addBabelPlugins, babelInclude } = require('customize-cra');
const path = require('path');

module.exports = override(
  addBabelPlugins('@babel/plugin-proposal-optional-chaining'),
  babelInclude([
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, 'node_modules/@toruslabs/torus-embed'),
    path.resolve(__dirname, 'node_modules/@web3-react/torus-connector')
  ])
);

3. 修改package.json中的scripts：

"scripts": {
  "start": "react-app-rewired start",
  "build": "CI= GENERATE_SOURCEMAP=false react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

4. 执行yarn install，然后运行yarn start

原因：react-scripts默认不会转译node_modules中的第三方包，通过react-app-rewired修改配置，让Babel处理@toruslabs/torus-embed和相关包的代码，同时添加可选链插件支持。

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