gulp babel, exports is not defined

Question

Consider the following example code (and maybe I am doing it wrong?)

 var FlareCurrency = {

 };

export {FlareCurrency};

I have the following task:

gulp.task("compile:add-new-currency-minified", function(){
  return gulp.src('src/add-new-currency/**/*.js')
             .pipe(babel())
             .pipe(concat('Flare-AddNewCurrency.js'))
             .pipe(uglify({"preserveComments": "all"}))
             .pipe(gulp.dest('dist/minified/'));
});

When I run this I get the following:

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var FlareCurrency={};exports.FlareCurrency=FlareCurrency;

For the fun of it, I wanted to run it in the console, yes I know it does nothing but I didn't expect to see this:

Uncaught ReferenceError: exports is not defined(…)

The non minified version:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var FlareCurrency = {};

exports.FlareCurrency = FlareCurrency;

throws the same error. Ideas?

Keneth

In the browser console? Browsers don't support CommonJS modules. Babel transforms ES6 modules to CommonJS modules by default. – Poulterer

That doesn't help me understand why I'm getting the error if I take this script that's compiled and then put it on a web page and run the page chrome will still give me the same error Oo what am I missing – Keneth

"That doesn't help me understand why I'm getting the error" What is there not to understand? Babel compiles to CommonJS modules, browsers don't support CommonJS modules. That's the reason you get the error. CommonJS modules is primarily used in Node.js. – Poulterer

People new to ES6 transpilers (including me) have the impression that this one tool (gulp/webpack) will do the job all on its own. It's dawning on me that that's not true. Even though I know CommonJS modules don't work in browser I thought babel was supposed to take care of it. But looks like babel works for most of es6, but not modules. Also only using gulp doesn't help. I had things working with webpack, but I was trying to replace it because it doesn't work well with server side code. But apparently even if I use gulp, I'll have to use invoke webpack from gulp. sigh! – Hesky

@FelixKling That is not a helpful comment. Obviously, we want to be able to use CommonJS modules and transpile them to ES5 so that browsers can understand them. What do you not understand from the question? – Duality

Answer 1

That is not actually a babel issue, you are just trying to run CommonJS code (transpiled from ES6 export) in the browser without preparation. CommonJS doesn't run on the browser, you need to use a tool to package it for the browser, such as Webpack or Browserify.

Just by coincidence this week I created a small project on Github that shows a setup of Gulp + ES6 code (using export) + Babel + Webpack: gulp-es6-webpack-example.

In my example you can load JS code on the browser either synchronously (pre-loaded) or asynchronously (lazy-loaded).

Kibbutz

Webpack 2 (in beta, but perfectly usable) does both transpilation and browserification, so export statements will work in the browser. – Landowner

Answer 2

I fix it just set se6 for settings gulp-typescript package:

import gulp from 'gulp';
import ts from 'gulp-typescript';
import uglify from 'gulp-uglify';
import browserSync from 'browser-sync';



export const scripts = () => {
    return gulp.src(['app/scripts/*', '!app/scripts/modules/'])
    .pipe(ts({
        noImplicitAny: true,
        target: "es6" // <<< THIS
    }))
    .pipe(uglify()) 
    .pipe(gulp.dest('dist/scripts/'))
    .pipe(browserSync.stream())
}

Besides you have to set type="module" for connect your js file in html.

<script type="module" src="scripts/index.js"></script>

Lobell