未捕获的 ReferenceError：regeneratorRuntime 未在 react 17、webpack 5 中定义，同时通过操作进行 api 调用

Posted 2023-02-22

【中文标题】未捕获的 ReferenceError：regeneratorRuntime 未在 react 17、webpack 5 中定义，同时通过操作进行 api 调用

【英文标题】：Uncaught ReferenceError: regeneratorRuntime is not defined in react 17, webpack 5 while making api calls through actions

【发布时间】：2021-04-05 18:47:50

【问题描述】：

尝试使用 superagent 进行 api 调用时出现此错误 Uncaught ReferenceError: regeneratorRuntime is not defined。

目前我正在使用 react 17、webpack 5 以及 css 模块和所有最新包。

package.json

  "dependencies": 
    "date-fns": "^2.16.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "superagent": "^6.1.0"
  ,
  "devDependencies": 
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@dr.pogodin/babel-plugin-react-css-modules": "^6.0.10",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "eslint": "^7.16.0",
    "html-webpack-plugin": "^5.0.0-beta.1",
    "mini-css-extract-plugin": "^1.3.3",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.1",
    "postcss-scss": "^3.0.4",
    "sass": "^1.30.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.3.0",
    "webpack-dev-server": "^3.11.0"
  

babel.config.js

module.exports = 
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: [
    [
      "@dr.pogodin/babel-plugin-react-css-modules",
      
        webpackHotModuleReloading: true,
        autoResolveMultipleImports: true,
        filetypes: 
          ".scss": 
            syntax: "postcss-scss",
          ,
        ,
        generateScopedName:
          process.env.NODE_ENV === "development"
            ? "[path]___[name]__[local]___[hash:base64:5]"
            : "[hash:base64:5]",
      ,
    ],
  ],
;

webpack.config.js

module: 
    rules: [
      
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      ,
      
        test: /\.(css|sass|scss)$/,
        exclude: /node_modules/,
        use: [
          isDev ? "style-loader" : MiniCssExtractPlugin.loader,
          
            loader: "css-loader",
            options: 
              modules: 
                auto: (resourcePath) =>
                  resourcePath.indexOf("assets/stylesheets") === -1,
                localIdentName: isDev
                  ? "[path]___[name]__[local]___[hash:base64:5]"
                  : "[hash:base64:5]",
              ,
              sourceMap: isDev,
            ,
          ,
          "sass-loader",
        ],
      
    ],
  ,

【参考方案1】：

对于 Babel 7，安装这两个依赖项：

npm install --save @babel/runtime 
npm install --save-dev @babel/plugin-transform-runtime

并且，在 .babelrc 中，添加：

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