React中使用react-router-dom时出现regeneratorRuntime未定义错误求助

问题重现 #

安装react-router-dom v6.4.2后，用BrowserRouter包裹App组件时出现以下错误：

Uncaught ReferenceError: regeneratorRuntime is not defined
    at main.js:19661:699
    at main.js:19661:1447
    at ./node_modules/@remix-run/router/dist/router.js (main.js:19661:1892)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at ./node_modules/react-router/dist/index.js (index.tsx:1142:2)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at ./node_modules/react-router-dom/dist/index.js (main.js:33836:70)
    at __webpack_require__ (bootstrap:24:1)

当前配置：

package.json 依赖片段 #

"dependencies": {
    "@azure/storage-blob": "^12.5.0",
    "@babel/runtime": "^7.19.4",
    "@fortawesome/fontawesome-pro": "^5.15.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/pro-duotone-svg-icons": "^5.15.3",
    "@fortawesome/pro-light-svg-icons": "^5.15.3",
    "@fortawesome/pro-regular-svg-icons": "^5.15.3",
    "@fortawesome/pro-solid-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "buflib": "0.0.34",
    "bulma": "^0.9.2",
    "core-js": "^3.25.5",
    "minireset.css": "0.0.7",
    "open-sans-fonts": "^1.6.2",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.4.2",
    "regenerator-runtime": "^0.13.9"
  },
  "devDependencies": {
    "@babel/core": "^7.13.14",
    "@babel/plugin-transform-runtime": "^7.19.1",
    "@babel/preset-env": "^7.19.4",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.2.0",
    "eslint": "^7.23.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "file-loader": "^6.2.0",
    "node-sass": "^5.0.0",
    "resolve-url-loader": "^3.1.2",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.31.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  }

.babelrc 配置 #

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

解决方案 #

1. 完善Babel配置，确保polyfill正确引入 #

修改.babelrc，补充React预设并配置core-js相关参数：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3,
      "targets": "> 0.25%, not dead"
    }],
    "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "regenerator": true
    }]
  ]
}

• useBuiltIns: "usage"：让Babel自动根据代码使用情况引入core-js的polyfill，无需手动导入
• corejs: 3：对应已安装的core-js@3.x版本
• 添加@babel/preset-react：之前的配置漏掉了React预设，导致React代码未被正确转译
• regenerator: true：明确开启regeneratorRuntime的自动注入

2. 在入口文件全局导入regenerator-runtime #

在项目入口文件（如src/index.js）顶部添加：

import 'regenerator-runtime/runtime';

直接全局注入regeneratorRuntime，避免依赖包内部未转译的代码报错。

3. 调整Webpack配置，强制转译react-router相关依赖 #

Webpack默认不转译node_modules内的代码，但react-router-dom v6依赖的@remix-run/router可能使用了未转译的Generator语法，需要在babel-loader中添加例外：
修改webpack配置的module.rules部分：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules(?!\/(@remix-run|react-router|react-router-dom))/,
        use: 'babel-loader'
      },
      // ...其他loader规则
    ]
  }
};

强制转译@remix-run、react-router、react-router-dom的代码，确保Generator语法被转译。

4. 清除缓存并重新构建 #

执行以下命令清理缓存、重装依赖并重新构建：

rm -rf node_modules package-lock.json
npm install
npm run build
npm start

验证 #

完成上述步骤后，重新启动项目，regeneratorRuntime is not defined错误应消失，react-router-dom的BrowserRouter可正常工作。

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