Babel generated code causes error exports is undefined

Question

When this code (generated from babel) runs I get an error exports is undefined

Object.defineProperty(exports, \'__esModule\', {

<

Answer 1

I read an article about how ES6 import and export are only supposed to work in browser with "statically analyzable files" and Babel removed import and export support in the browser because of this. Something to do with async or possibly security?

If you want to skip the server-side bundling for dev purposes, you can put

window.MyModule = MyModule at the bottom, then import

var MyModule = window.MyModule at the top of your next file

Answer 2

You are most likely not executing the code in an environment that supports CommonJS modules. You could use a bundler, such as Browserify or webpack to bundle your modules into something that can be run in different environments.

Or you could choose a different module transformer.

---

With webpack

Run npm install -g webpack; npm install -D babel-loader. Then with this webpack configuration:

// webpack.config.js
module.exports = {
    entry: "./path/to/entry/module.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
      loaders: [
        { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
      ]
    }
};

running the webpack command will convert all *.js files reachable via the entry file with babel and bundle them together into bundle.js.