webpack: Babel Transform Runtime doesn't seem to work with Webpack

Do you want to request a feature or report a bug? Report a bug

What is the current behavior? When using webpack and babel’s transform-runtime, I’m unable to use exports *.

If the current behavior is a bug, please provide the steps to reproduce. Babel’s transform runtime plugin doesn’t seem to be running, since the class Symbol isn’t transformed at all. Babel was not running at all before because include property as invalid.

Now the problem is with the exports - related to #3917

Consider a simple input file, the only entry (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: /src/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["es2015", "stage-3"],
                        plugins: ['transform-runtime']
                    }
                }
            }
        ]
    }

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

output: gist

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

What is the expected behavior?

Exports should work, as they do without transform-runtime plugin.

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System. Node: v6.10.3

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”

Am I missing something?

Thanks for any help!

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 15 (1 by maintainers)

Most upvoted comments

Try setting modules to false:

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

I think if babel doesn’t touch import statements it should work.

transform-runtime emits ESM even if babel should transpile ESM to CJS. I guess plugin an preset are in incorrect order. modules: false should fix it.


Tree Shaking also works with export *.

For the purpose of dead code elimination, yes. There are some techniques which automatically transform your imports to the specific ones. E.g. https://www.npmjs.com/package/babel-plugin-transform-imports But since there is no standard naming technique it must be applied on a case by case basis.

I avoided the Cannot assign to read only property 'exports' of object error (when referencing any babel-runtime items, like Object.keys), by removing the modules: false in my .babelrc

AFAIK, webpack doesn’t have anything to do with ES modules if you don’t set modules to false in babel configuration.