Uncaught ReferenceError: regeneratorRuntime when using Sync/Await

Question

I'm getting the following error when using Async/Await for functions:

Uncaught ReferenceError: regeneratorRuntime

Seems to be a common problem but I've tried a couple of solutions I found on stackoverflow to no avail, I've now ended up with a huge list of babel dependencies. :) I'm very confused about all this, could someone spot what's wrong with my babel/webpack files?

Thank you

Package.json (relevant dependencies only)

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

Answer 1

I took the config files you've provided and did a small test - https://codesandbox.io/s/async-await-webpack-ljv7h?file=/src/App.js I don't see anything wrong with it. I was able to use async/await just fine. May be try a clean up and reinstall - rm package-lock.json && rm -rm node_modules && npm install and see if that fixes your issue.

Answer 2

you forgot to add the plugin

.babelrc

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

in my case I always do this:

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

I also suggest you use:

.babelrc

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

and if you are using react you may also need preset "@babel/preset-react"

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