regeneratorRuntime is not defined Gulp Babel v7 even after plugin-transform-runtime install

Question

I've got a JS project where I'm trying to use async/await, I've installed the relevant package to transform runtime, but still get this error:

regeneratorRuntime is not defined

What am I missing?

package.json

"dependencies": {
  "@babel/core": "^7.14.0",
  "@babel/plugin-transform-runtime": "^7.13.15",
  "@babel/preset-env": "^7.14.1",
  "bootstrap": "4.6.0",
  "eslint": "7.21.*",
  "gulp": "4.0.2",
  "gulp-autoprefixer": "7.0.*",
  "gulp-babel": "^8.0.0",
  "gulp-concat": "2.6.*",
  "gulp-eslint": "6.0.*",
  "gulp-minify": "3.1.*",
  "gulp-sass": "4.1.*",
  "gulp-stylelint": "13.0.*",
  "stylelint": "13.11.*"
},

gulpfile.js

const gulp = require('gulp')
const sass = require('gulp-sass')
const babel = require('gulp-babel')
const concat = require('gulp-concat')
const minify = require('gulp-minify')
const eslint = require('gulp-eslint')
const autoprefixer = require('gulp-autoprefixer')

// build the JS
gulp.task('build-js', () =>
  gulp.src([
    'src/js/plugins/input.js'
  ])
  .pipe(concat('output.js'))
  .pipe(babel({
    presets: [['@babel/env', { modules: false }]]
  }))
  .pipe(minify())
  .pipe(gulp.dest('src/assets/js/'))
);

Answer 1

I was having the same problem. The solution was to concatenate the output.js file with the file node_modules/regenerator-runtime/runtime.js. Basically you just need to have this file being loaded somewhere in your website.

I didn't find the need for @babel/plugin-transform-runtime, but I am still understanding how all of this works, so let me know if it is necessary.

Here's a possible gulpfile.js:

'use strict';

// Import `src` and `dest` from gulp for use in the task.
const { series, parallel, src, dest } = require("gulp")

// Import Gulp plugins.

// CSS related
const sass = require('gulp-sass')(require('sass')); // compile scss to css
const autoprefixer = require('gulp-autoprefixer'); // add vendor prefixes to css for older browsers
const cleanCSS = require('gulp-clean-css'); // minify css

// JS related
const babel = require("gulp-babel"); // compile JS for older browsers
const uglify = require("gulp-uglify"); // minify JS

const concat = require("gulp-concat"); // concatenate files
const del = require("del"); // delete files
const plumber = require("gulp-plumber"); // Stop at gulp errors

const destDir = './dist';
const paths = {
    styles: {
        src: './sass/**/*.scss',
        dest: `${destDir}/css/`,
        bundleName: `main.css`
    },
    scripts: {
        src: './js/**/*.js',
        dest: `${destDir}/js/`,
        bundleName: `main.js`
    }
};

function clean() {
    return del([paths.styles.dest, paths.scripts.dest])
}

function delTemp() {
    return del([tempDir]);
}

function jsDeps() {
    const files = [
      "node_modules/regenerator-runtime/runtime.js"
    ]
    return (
      src(files)
        .pipe(plumber())
        // Combine these files into a single main.deps.js file.
        .pipe(concat("main.deps.js"))
        .pipe(uglify())
        // Save the concatenated file to the tmp directory.
        .pipe(dest(tempDir))
    )
}

function jsBuild() {
    // This will grab any file within js/ or its
    // subdirectories, then ...
    return src(paths.scripts.src)
        // Stop the process if an error is thrown.
        .pipe(plumber())
        // Concatenate all files within src/components and its
        // subdirectories into a single file named main.js.
        .pipe(concat("main.build.js"))
        // Transpile the JS code using Babel's preset-env.
        .pipe(
            babel({
                presets: [
                    [
                        "@babel/env",
                        {
                            modules: false
                        }
                    ]
                ]
            })
        )
        // Minify the self-authored bundle.
        .pipe(uglify())
        // Save each component as a separate file in dist.
        .pipe(dest(tempDir));
}

function jsConcat(done) {
    // An array of the two temp (concatenated) files.
    const files = [`${tempDir}/main.deps.js`, `${tempDir}/main.build.js`]
    return (
      src(files)
        .pipe(plumber())
        // Concatenate the third-party libraries and our
        // homegrown components into a single main.js file.
        .pipe(concat(paths.scripts.bundleName))
        // Save it to the final destination.
        .pipe(dest(paths.scripts.dest))
    )
}

function sassBuild() {
    return src(paths.styles.src)
        .pipe(plumber())
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(concat(paths.styles.bundleName))
        .pipe(cleanCSS())
        .pipe(dest(paths.styles.dest));
}

const build = series(clean, parallel(series(jsDeps, jsBuild, jsConcat), sassBuild), delTemp);

/*
 * You can use CommonJS `exports` module notation to declare tasks
 */
exports.clean = clean;
exports.sassBuild = sassBuild;
exports.jsBuild = jsBuild;
exports.build = build;


// Gulp 4 uses exported objects as its tasks. Here we only have a
// single export that represents the default gulp task.
exports.default = build;