I'm using gulp, gulp-babel, which is causing an error.
I don't know how I can use module (ES6) because, when I try to import another file into this, it shows me this message:

Uncaught ReferenceError: require is not defined

I know the problem is after code has transpiled, because, I tried linking to code that's not transpiled, and it works perfectly.

These are my files.

app.js *(Where I want to use import to get another module...)

Note: Using require from CommonJS project, also does not work.

import a from "./un.js"; //This doesn't work
class Player{
    contructor(){...}
}

un.js (Where i want to get a const from)

export const a = 1;

index.html (Html file) (File transpiled)

<script src="./dist/js/app.js" type="module"></script>

And this is my gulpfile.babel.js (It's working perfectly)

const gulp = require ('gulp');
const babel = require('gulp-babel');
function transpileToES5() {
    return  gulp.src('./assets/js/*.js')
    .pipe(babel())
    .pipe(gulp.dest('./dist/js/'));
}

gulp.task('default', function () {
    return gulp.watch(['./assets/js/*.js'], transpileToES5)
});

And finally. This is my .babelrc file (I tried with monjs, systemjs, amd... Nothing works )

{
    "presets" : ["@babel/env"],
    "plugins": ["transform-es2015-modules-monjs"]
}

This is the Error:

This is the line causing the error:

I'm using gulp, gulp-babel, which is causing an error.
I don't know how I can use module (ES6) because, when I try to import another file into this, it shows me this message:

Uncaught ReferenceError: require is not defined

I know the problem is after code has transpiled, because, I tried linking to code that's not transpiled, and it works perfectly.

These are my files.

app.js *(Where I want to use import to get another module...)

Note: Using require from CommonJS project, also does not work.

import a from "./un.js"; //This doesn't work
class Player{
    contructor(){...}
}

un.js (Where i want to get a const from)

export const a = 1;

index.html (Html file) (File transpiled)

<script src="./dist/js/app.js" type="module"></script>

And this is my gulpfile.babel.js (It's working perfectly)

const gulp = require ('gulp');
const babel = require('gulp-babel');
function transpileToES5() {
    return  gulp.src('./assets/js/*.js')
    .pipe(babel())
    .pipe(gulp.dest('./dist/js/'));
}

gulp.task('default', function () {
    return gulp.watch(['./assets/js/*.js'], transpileToES5)
});

And finally. This is my .babelrc file (I tried with monjs, systemjs, amd... Nothing works )

{
    "presets" : ["@babel/env"],
    "plugins": ["transform-es2015-modules-monjs"]
}

This is the Error:

This is the line causing the error:

• javascript
• gulp
• babeljs
• es6-modules

• 1 Is there no answer to this? I'm dealing with the exact same thing trying to get my code working in IE11 and adding core-js 3. – pingeyeg Commented May 19, 2020 at 20:36
• 1 No, I'm finally using webpack. Because this was "impossible" for me. But you can check bundlers tools like Webpack, Browserify even CommonJS, RequireJS. There are many information about them and it solve your problem. Gulp needs a bundler tool probably (some navigator doesn't support ES6 modules yet, like IE11), that was my conclusion – Alejandro Parra Commented May 20, 2020 at 0:50

1 Answer 1

I had exactly the same problem. You have to use Browserify + Babelify + Gulp. More info here:

https://medium./@hey.aaron/getting-import-export-working-es6-style-using-browserify-babelify-gulp-5hrs-of-life-eca7786e44cc

    return browserify({
    entries: ['./src/js/index.js'],
    debug: true,
    transform: [
      babelify.configure({ presets: ['@babel/preset-env'] }),
    ],
  })
    .bundle()
    .pipe(source('index.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))