I’m submitting a bug report
I’m running into what seems like a bit of a Catch-22 when trying to use ES6 Modules within my
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
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!