未捕获的 ReferenceError：使用 Sync/Await 时的 regeneratorRuntime答案

【问题标题】：Uncaught ReferenceError: regeneratorRuntime when using Sync/Await未捕获的 ReferenceError：使用 Sync/Await 时的 regeneratorRuntime
【发布时间】：2020-10-17 15:01:02
【问题描述】：

我在对函数使用 Async/Await 时遇到以下错误：

Uncaught ReferenceError: regeneratorRuntime

似乎是一个常见问题，但我尝试了一些在 stackoverflow 上找到的解决方案，但都无济于事，我现在得到了一个庞大的 babel 依赖项列表。 :) 我对这一切感到很困惑，有人能发现我的 babel/webpack 文件有什么问题吗？

谢谢

Package.json（仅相关依赖）

  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.12.1",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.6",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.44.2",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.12.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "webpack-cli": "^3.3.7"
  }

.babelrc

{
  "presets": [
    "react",
    [
      "env"
    ]
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread"
  ]
}

webpack.config.js

const webpack = require("webpack");
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");

const config = {
    entry: ["./src/index"],
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
        publicPath: "/"
    },
    
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                test: /\.js$/,
                use: "babel-loader",
                exclude: /node_modules/
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 20000
                        }
                    },
                    "image-webpack-loader"
                ]
            },
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url-loader?limit=10000&mimetype=application/font-woff"
            },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader"
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin(),
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            inject: true,
            filename: 'index.html'
        }),
    ], 
    devServer: {
        historyApiFallback: true,
    }
};


module.exports = config;

【问题讨论】：

这能回答你的问题吗？ Babel 6 regeneratorRuntime is not defined
@aRvi 为我弹出的第一件事。我已经尝试了很多解决方案，但最终还是出现了更多错误，所有这些对我来说都非常难以承受。

标签： javascript reactjs asynchronous webpack babeljs

【解决方案1】：

我拿了你提供的配置文件并做了一个小测试 - https://codesandbox.io/s/async-await-webpack-ljv7h?file=/src/App.js 我看不出有什么问题。我能够很好地使用 async/await。可以尝试清理并重新安装 - rm package-lock.json && rm -rm node_modules && npm install 看看是否能解决您的问题。

【讨论】：

【解决方案2】：

你忘了添加插件

.babelrc

"plugins": ["@babel/plugin-transform-runtime"]

就我而言，我总是这样做：

npm install -D babel-loader @babel/core @babel/preset-env webpack webpack-cli

我也建议你使用：

.babelrc

"presets": ["@babel/preset-env"]

如果你使用 react 你可能还需要预设 "@babel/preset-react"

"presets": [
      "@babel/preset-react",
      "@babel/preset-env"
    ]

【讨论】：