Webpack 2 ES2015 config import – best practices

I’m submitting a bug report

Webpack version:
2.1.0-beta.20

I’m running into what seems like a bit of a Catch-22 when trying to use ES6 Modules within my webpack.config.babel.js file.

Webpack 2 introduces native support for ES6 modules. As such, I’ve followed the recommendations found in What’s new in webpack 2 and replaced my es2015 babel preset with es2015-webpack in my .babelrc file. This prevents babel from transpiling ES6 imports/exports, allowing Webpack to handle them instead.

Unfortunately, this causes the webpack command to throw SyntaxError: Unexpected token import. This makes intuitive sense; Webpack doesn’t process its own config file, and babel hasn’t been asked to transpile import/export statements, so node gets passed a file with import and errors.

The obvious workaround seems to be including the es2015 plugin in .babelrc and then overriding it with es2015-webpack in webpack.config.babel.js. However, this feels a bit hacky. Is this currently considered best practice? Or is there another better solution? (I’m assuming that the babel config defined in .babelrc will be merged with the babel config defined in webpack.config.babel.js, with the latter overriding the former. However, I haven’t confirmed that. Is this actually the case?)

Also, it took quite a bit of head-scratching to realize what exactly was happening here. It would be great if the solution to using ES6 modules in webpack.config.babel.js was documented somewhere. I’m more than happy to write that documentation if that would be helpful.

Thanks for such an incredible tool!

Author: Fantashit

4 thoughts on “Webpack 2 ES2015 config import – best practices

  1. A structure like this could help if your web source code is in an app folder.

    +- .babelrc
    +- webpack.config.babel.js
    +-+ app
      +- .babelrc
      +- ...
    
  2. Gosh, took me almost an hour to find even a single mention of using webpack@2 with ES6 config-file.

    @sokra thanks for the hint, is this the ‘final and official’ way of doing it? Or are you planning on processing the config file with webpack itself in future?

    @mover96 how is this a node issue? Suppose I have a working setup with webpack@1 and webpack.config.babel.js file. I upgrade to webpack@2, change the preset to {"modules": false} and now it fails. Well, of course adding ES6 native support to Node will solve the issue, but still this is not something to address right now for Node

  3. Actually, you can config it like this.

    {
      "presets": ["./preset-es2015", "react", "stage-0"],
      ...
    }
    module.exports = {
      presets: [
        [require('babel-preset-es2015').buildPreset, {
          modules: process.env.RUN_MODE === 'es' ? false : 'commonjs',
        }],
      ],
    };
    

    See example at https://github.com/hung-phan/koa-react-isomorphic. You can set the environment based on your requirement

  4. I resolved this issue by moving webpack configs to a separate webpack folder and then creating a simple .babelrc there:

    {
    	"presets":
    	[
    		"es2015"
    	]
    }

Comments are closed.