There is a 'require is not defined' problem' when using 'transform-runtime'' in gulp

to use es2017"s asynchronous functions in your project.
so when using gulp to process js files, I used "babel-preset-env" and " babel-plugin-transform-runtime" .
the require syntax of nodejs appears after parsing, so the browser reported an error.
how should I handle this situation.
hope to get an answer, thank you.
1. Project dependency:

2.gulpfile.js:

3.js:

4.:

Mar.04,2021

this is the commonjs package specification. You should work with another wepack, or introduce a commonjs library.


babel-plugin-transform-runtime the library is modular. If it is determined that it needs to be introduced, you need to convert the CommonJS.

use gulp to see webpack-stream , or directly use webpack or Browserify.


ask for more details upstairs: I have the same problem. When there are Promise and other babel-polyfill in the js file, the merged file will contain require (""), but this is not the lexical environment on the browser side, resulting in requrie is not defined.. Solve.


I have the same problem as you and have been tested for availability. I used to use browserify, first and then babel, so the var _ typeof2=require ("babel-runtime/helpers/typeof"), require is not parsed) appears after the code is packaged with babel. That's why there is a require is not define problem.
correct solution:

// @browserify 
var getBrowserifyStream = function() {
  return through.obj(function(file, env, callback) {
    var self = this,
      filePath = file.path;

    // browserifyjs
    var b = browserify({
      entries: filePath
    });

    b.bundle(function(err, buffer) {
      if (err) {
        errStream(self, err);
        return;
      }
      file._contents = buffer;
      callback(null, file);
    });
  });
};


 .pipe(babel({
      presets: ['es2015']
    }))
    // browserify require()
    .pipe(getBrowserifyStream())
Menu