Babel Transform Runtime issue with Webpack 2

Question

Good afternoon,

This is the same issue I reported at webpack's github, but I suspect I might be the one doing something wrong, thus opening a question here.

I'm trying to configure webpack 2 with Babel, and one of the requirements is to transpile built-ins such as Symbol.

Despite that now working fine, when I try to use webpack and babel's transform-runtime, I'm unable to use exports *.

Input file (src/index.js):

export * from './secondFile'

secondFile.js:

export let TESTSYMBOL = Symbol('test');

export let TESTSYMBOL2 = Symbol('test2');

webpack.config.js (only copied the relevant part):

module: {
    rules: [
        {
            test: /\.jsx?$/,
            // Skip any files outside of `src` directory
            include:path.resolve(__dirname, 'src'),
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ["es2015", "stage-3"],
                    plugins: ['transform-runtime']
                }
            }
        }
    ]
}

script:

"webpack -d --config config/webpack.config.js"

Output file: gist

Exception:

Uncaught ReferenceError: exports is not defined - at Object.defineProperty(exports, "__esModule", {

Dev Dependencies:

"webpack": "2.6.1",
"webpack-dev-server": "2.4.5",
"webpack-notifier": "1.5.0"
"babel-cli": "6.24.1",
"babel-loader": "7.0.0",
"babel-plugin-transform-runtime": "6.23.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-stage-3": "6.24.1"

Dependencies: - "babel-runtime": "6.23.0"

Thanks for any help!

Apidcloud Apidcloud · Accepted Answer · 2017-05-30T12:41:45

It seems that the problem is with the include. For some reason, I was unable to use path.resolve or path.join. The webpack documentation has such example.

If the webconfig is as follows, it works just fine:

 module: {
    rules: [
        {
            test: /\.js$/,
            include: [
                /src/
            ],
            // or exclude: [/node_modules/],
            use: 
                {
                    loader: 'babel-loader',
                    options: {
                        plugins: ['transform-runtime'],
                        presets: ['es2015', 'stage-3']

                    }
                }

        }
    ]
}

Either way, now there's a problem with exports not defined, which can be solved by setting modules to false in es2015 preset (thanks to Vanuan at Github for that suggestion):

presets: [['es2015', { modules: false }], 'stage-3'],

Babel Transform Runtime issue with Webpack 2

2 Answers