regeneratorRuntime is not defined Gulp + Webpack + Babel

Question

I am trying to use ES7 'async-await functions' with bable 7 + webpack + gulp but I get this error: regeneratorRuntime is not defined

I found several solutions but none of them worked: I tried with core-js and @babel/plugin-transform-runtime and even babel-polyfill which is deprecated according to babel docs but couldn't solve this error.

Here are my latest config files:

package.json

        "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/plugin-transform-runtime": "^7.10.1",
    "@babel/preset-env": "^7.10.2",
    "@babel/runtime": "^7.10.2",
    "autoprefixer": "^9.8.0",
    "babel-loader": "^8.1.0",
    "browser-sync": "^2.26.7",
    "core-js": "^3.6.5",
    "gulp": "^4.0.2",
    "gulp-cli": "^2.2.1",
    "gulp-postcss": "^8.0.0",
    "postcss-color-function": "^4.1.0",
    "postcss-hexrgba": "^1.0.2",
    "postcss-import": "^12.0.1",
    "postcss-mixins": "^6.2.2",
    "postcss-nested": "^4.1.2",
    "postcss-simple-vars": "^5.0.2",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6"
  },
  "dependencies": {
    "jquery": "^3.4.1",
    "normalize.css": "^8.0.1",
    "slick-carousel": "^1.8.1"
  }

webpack.config.js

const path = require('path'),
settings = require('./settings');

module.exports = {
  entry: {
    App: settings.themeLocation + "js/scripts.js"
  },
  output: {
    path: path.resolve(__dirname, settings.themeLocation + "js"),
    filename: "scripts-bundled.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env',
            {
              "useBuiltIns": "usage"
            }],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      }
    ]
  },
  mode: 'development'
}

JavaScript code:

class Search {
    constructor() {
        this.openButton = document.querySelector("#open-button");
        this.closeButton = document.querySelector("#search-overlay-close");
        this.searchOverlay = document.querySelector("#search-overlay");
        this.searchField = document.querySelector("#search-term");
        this.resultsDiv = document.querySelector("#search-overlay__results");
    }

[...] 


    getResults() {
        async function searchResults() {
            try {            
                let postsResponse = await fetch(`http://localhost:3000/wp-json/v2/posts?search=${this.searchField.value}`);
                let posts = await postsResponse.json();
                console.log(posts);                                
            }
            catch (err) {
                this.resultsDiv.innerHTML = "Oops! an error occurred, please, try again later";
                console.log(err);
            }            
        }

        searchResults();


        this.resultsDiv.innerHTML = "Search results will go here";
    }
}

export default Search;

Atip Atip · Accepted Answer · 2020-06-03T10:38:59

So, after 2 days of searching and testing I finally resolved this issue: 1. Clean webpack works perfectly with recommended config:

package.json

{
  "name": "babel-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack --config webpack.config.js --color"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/plugin-transform-runtime": "^7.10.1",
    "@babel/preset-env": "^7.10.2",
    "babel-loader": "^8.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

webpack.config.js

const path = require('path');
module.exports = {
    mode: 'development',
    entry: {
        index: './index.js'
    },
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [
                            ["@babel/plugin-transform-runtime", { "regenerator": true }
                            ]
                        ]
                    }
                }
            }
        ]
    }
}

I updated all webpack and babel related packages to the latest stable versions.
There was a problem in my gulp file. So I changed usage of webpack through webpack-stream. Before:

   const webpack = require('webpack');
    gulp.task('scripts', function (callback) {
      webpack(require('./webpack.config.js'), function (err, stats) {
        if (err) {
          console.log(err.toString());
        }    
        console.log(stats.toString());
        callback();
      });
    });

After:

 const webpack = require('webpack-stream');
 gulp.task('scripts', function() {
   return gulp.src(settings.themeLocation + "js/scripts.js")
     .pipe(webpack( require('./webpack.config.js') ))
     .pipe(gulp.dest(settings.themeLocation + "js"));
 });

regeneratorRuntime is not defined Gulp + Webpack + Babel

1 Answers