Uncaught ReferenceError: require is not defined(…)

[zhenyanghua]

After removing the line "only": "gulpfile.babel.js", in the .babelrc file, I created a class:

export default class App {
  constructor() {
    console.log("Cool")
  }
}

Then, I imported it in the first line of the default main.js, and called it at the end:

import App from './app'
//...
(function() {
  'use strict';

  // default stuffs ...

  // Your custom JavaScript goes here

  const app = new App();

})();

It threw me this Uncaught ReferenceError: require is not defined(…), and the error point to the first line of the main.js where the statement import App from './app' is.

[verlok]

Hi, we get the same error. We tried both the latest release from June and the latest version from master. None worked.

[DiegoTonini]

Same bug for me. The kit is not usable until google will solve this bug.

[Sam-Hoult]

Same issue, all I want to do is write sexy es2015

[lilianchisca]

You can use this recipe to add support for es6 modules: Setting up Browserify with Babelify

[anhuiliujun]

Same issue, how to write es2015

[owzzz]

Any word on this? It'd be great if this worked out of the box as opposed to having to hack the project to include browserify/babelify.

[eapostol]

Its June 2017. This issue is still happening. Any idea on whether it will be supported?

[kr1stjans]

Can anyone post "hacked" solution? I lost days on this issue.

[balazsorban44]

Same problem here.

[alexandonie]

@balazsorban44, @kr1stjans If you still need help:

You get those errors because the boilerplate doesn't support ES6 modules at the moment. If you feel like you don't really make use of the modules then you can still keep your code in separate files but you'll have to import them one by one in gulp.babel.js (see line 110).

If your app structure is heavily based on ES6 modules and you'd like to keep using that then you'll have to use a js bundler like browserify, webpack, etc. I had a little play with the boilerplate and this is the solution I came up with:

gulp.task('scripts', () =>
    gulp.src('./src/scripts/main.js')
    .pipe(webpack({
      output: {
        filename: '[name].js'
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['env']
              }
            }
          }
        ]
      },
      devtool: '#inline-source-map'
    }))
    .pipe(gulp.dest('.tmp/scripts'))
    .pipe($.sourcemaps.init({ loadMaps: true }))
    .pipe($.uglify())
    .pipe($.rename('main.min.js'))
    // Output files
    .pipe($.size({title: 'scripts'}))
    .pipe($.sourcemaps.write('.'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(gulp.dest('.tmp/scripts'))
);

Don't forget to: install the required dependencies npm install --save-dev webpack-stream babel-loader babel-preset-env gulp-rename

import the bundler at the top of the file next to the other imports import webpack from 'webpack-stream';

import the right js file in your html <script src="/scripts/main.min.js"></script>

Hope this helps.

P.S: if the sourcemaps don't show the correct file, give the browser a refresh.

[czechue]

@alexandonie Thank you very much, this solution saved my day. And I have spent few hours trying to figure it out by myself. Thanks again!

[YongX]

@alexandonie Thank you, your solution saved my day too.