[Solved] React async/await API call failed. ReferenceError: regeneratorRuntime is not defined Babel 6

ReferenceError: regeneratorRuntime is not defined
ReferenceError: regeneratorRuntime is not defined

Problem

I’m trying to use async, await APIs with Babel 6, and I’m getting a ‘regeneratorRuntime is not defined’ error. Here below I have added configuration files.

webpack.config.dev.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
process.env.NODE_ENV = 'development';

module.exports = {
  mode: 'development',
  target: 'web',
  devtool: 'cheap-module-source-map',
  entry: './src/index',
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/',
    filename: 'bundle.js',
  },
  devServer: {
    stats: 'minimal',
    overlay: true,
    historyApiFallback: true,
    disableHostCheck: true,
    headers: { 'Access-Control-Allow-Origin': '*' },
    https: false,
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.API_URL': JSON.stringify('http://localhost:3001'),
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      // favicon: 'src/favicon.ico',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        options: {
          presets: [
            '@babel/preset-env',
            '@babel/react',
            {
              plugins: [
                '@babel/plugin-proposal-class-properties'
              ],
            },
          ],
        },
      },
      {
        test: /(\.css)$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

package.json

{
  "name": "ps-redux",
  "description": "Sample-course",
  "scripts": {
    "start": "run-p start:dev start:api",
    "start:dev": "webpack-dev-server --config webpack.config.dev.js --port 3000",
    "prestart:api": "node tools/createMockDb.js",
    "start:api": "node tools/apiServer.js"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.12.13",
    "acorn": "^8.0.5",
    "bootstrap": "4.3.1",
    "eslint": "^7.20.0",
    "eslint-loader": "^4.0.2",
    "immer": "2.1.3",
    "prop-types": "15.7.2",
    "react": "16.8.4",
    "react-dom": "16.8.4",
    "react-redux": "6.0.1",
    "react-router-dom": "5.0.0",
    "react-toastify": "4.5.2",
    "redux": "4.0.1",
    "redux-thunk": "2.3.0",
    "reselect": "4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/plugin-transform-runtime": "^7.12.15",
    "@babel/preset-env": "^7.12.16",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-react-app": "7.0.2",
    "css-loader": "2.1.1",
    "cssnano": "4.1.10",
    "enzyme": "3.9.0",
    "enzyme-adapter-react-16": "1.11.2",
    "fetch-mock": "7.3.1",
    "html-webpack-plugin": "^3.2.0",
    "http-server": "0.9.0",
    "jest": "24.5.0",
    "json-server": "^0.14.2",
    "mini-css-extract-plugin": "0.5.0",
    "node-fetch": "^2.3.0",
    "npm-run-all": "^4.1.5",
    "postcss-loader": "3.0.0",
    "react-test-renderer": "16.8.4",
    "react-testing-library": "6.0.0",
    "redux-immutable-state-invariant": "2.1.0",
    "redux-mock-store": "1.5.3",
    "rimraf": "2.6.3",
    "style-loader": "0.23.1",
    "web-vitals": "^1.1.0",
    "webpack": "4.29.6",
    "webpack-bundle-analyzer": "3.1.0",
    "webpack-cli": "3.3.0",
    "webpack-dev-server": "3.2.1"
  },
  "engines": {
    "node": ">=8"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  }
}

How we can do it without .babelrc (just using webpack config file)?.

Solution

This error is caused when async/await functions are used without the proper Babel plugins.  To install @babel/plugin-transform-runtime by typing in the command line,

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

Then Add the plugin to pakage.json file in plugins array.

options: {
          presets: [
            '@babel/preset-env',
            '@babel/react',
            {
              plugins: ['@babel/plugin-proposal-class-properties'
               , '@babel/plugin-transform-runtime'
            ],
            },
          ],
        },

So the final changes of the package.json and webpack.config.dev.js file would be,

package.json file

{
  "name": "ps-redux",
  "description": "Sample-course",
  "scripts": {
    "start": "run-p start:dev start:api",
    "start:dev": "webpack-dev-server --config webpack.config.dev.js --port 3000",
    "prestart:api": "node tools/createMockDb.js",
    "start:api": "node tools/apiServer.js"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.12.13",
    "acorn": "^8.0.5",
    "bootstrap": "4.3.1",
    "eslint": "^7.20.0",
    "eslint-loader": "^4.0.2",
    "immer": "2.1.3",
    "prop-types": "15.7.2",
    "react": "16.8.4",
    "react-dom": "16.8.4",
    "react-redux": "6.0.1",
    "react-router-dom": "5.0.0",
    "react-toastify": "4.5.2",
    "redux": "4.0.1",
    "redux-thunk": "2.3.0",
    "reselect": "4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/plugin-transform-runtime": "^7.12.15",
    "@babel/preset-env": "^7.12.16",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-react-app": "7.0.2",
    "css-loader": "2.1.1",
    "cssnano": "4.1.10",
    "enzyme": "3.9.0",
    "enzyme-adapter-react-16": "1.11.2",
    "fetch-mock": "7.3.1",
    "html-webpack-plugin": "^3.2.0",
    "http-server": "0.9.0",
    "jest": "24.5.0",
    "json-server": "^0.14.2",
    "mini-css-extract-plugin": "0.5.0",
    "node-fetch": "^2.3.0",
    "npm-run-all": "^4.1.5",
    "postcss-loader": "3.0.0",
    "react-test-renderer": "16.8.4",
    "react-testing-library": "6.0.0",
    "redux-immutable-state-invariant": "2.1.0",
    "redux-mock-store": "1.5.3",
    "rimraf": "2.6.3",
    "style-loader": "0.23.1",
    "web-vitals": "^1.1.0",
    "webpack": "4.29.6",
    "webpack-bundle-analyzer": "3.1.0",
    "webpack-cli": "3.3.0",
    "webpack-dev-server": "3.2.1"
  },
  "engines": {
    "node": ">=8"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  }
}

Note: We assume that the installed all below-highlighted packages related to babel configurations, otherwise do copy and replace the above configuration code to the package.json file and do run this command npm i again in the command window.

webpack.config.dev.js file

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
process.env.NODE_ENV = 'development';

module.exports = {
  mode: 'development',
  target: 'web',
  devtool: 'cheap-module-source-map',
  entry: './src/index',
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/',
    filename: 'bundle.js',
  },
  devServer: {
    stats: 'minimal',
    overlay: true,
    historyApiFallback: true,
    disableHostCheck: true,
    headers: { 'Access-Control-Allow-Origin': '*' },
    https: false,
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.API_URL': JSON.stringify('http://localhost:3001'),
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      // favicon: 'src/favicon.ico',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        options: {
          presets: [
            '@babel/preset-env',
            '@babel/react',
            {
              plugins: ['@babel/plugin-proposal-class-properties'
               , '@babel/plugin-transform-runtime'
            ],
            },
          ],
        },
      },
      {
        test: /(\.css)$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};
Shivaraju M
Shivaraju M

Over 3+ years experience in IT industry, good knowledge in . Net-based Web applications, windows applications, web services, and SPAs. I have played
multiple roles related to technical delivery in multiple domains while working on over 10+ technologies. I am
currently focused on continuous improvement and agile project management.

Leave a Reply