I am working on a JS application without any JS framework. I am using babel for arrow functions support etc. I wanted to use ES6 modules in my application. If I transpile JS code which contains import and export statements and run in browser, I was getting error saying "exports is not defined".

I tried different solutions available online. But nothing worked.

Can't I use ES6 modules just by adding babel and transpiling? If yes, how can I achieve that?

In utils.js

export default Utils = {

};

In app.js

import Utils from './utils';

In gulpfile.js

.pipe(babel({
        presets: ['es2015']
}))

I am working on a JS application without any JS framework. I am using babel for arrow functions support etc. I wanted to use ES6 modules in my application. If I transpile JS code which contains import and export statements and run in browser, I was getting error saying "exports is not defined".

I tried different solutions available online. But nothing worked.

Can't I use ES6 modules just by adding babel and transpiling? If yes, how can I achieve that?

In utils.js

export default Utils = {

};

In app.js

import Utils from './utils';

In gulpfile.js

.pipe(babel({
        presets: ['es2015']
}))

• javascript
• babeljs
• es6-modules

• show the code that you are using. – Tarun Dugar Commented Mar 25, 2019 at 17:00
• @TarunDugar Updated post with code – Kalyan Commented Mar 25, 2019 at 17:06
• are you running the build code in the browser or the source code? There has to be a build step before you can ship ES6 code to the browser. – Tarun Dugar Commented Mar 25, 2019 at 17:22

1 Answer 1

While Babel can convert ES6 module syntax to CommonJS module syntax, it won't bundle modules for use in environments which don't support them at all.

For that, you should use Browserify, Webpack or another module bundler.

For more information you should see:

• ES6 development environment made easy with babel, gulp and webpack!
• Transpiling ES6 Modules to AMD & CommonJS Using Babel & Gulp (which also covers using Browserify)