I have a React project which uses Webpack as the module bundler, and babel-loader
to transform it into ES5, using the following settings:
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader"
}
]
}
]
},
The options are set in a stand-alone .babelrc
file.
Babel 6.13.0 supports ECMAScript modules, which means ECMAScript modules doesn't need to be transformed into CommonJS modules first. To get this behaviour, the documentation says that we should use this setting in our .babelrc
.
{
presets: [["es2015", { "modules": false }], "react"]
}
However, when I try to run Webpack using this setting, it comes back with the error:
$ ./node_modules/.bin/webpack
/home/d4nyll/foo/bar/webpack.config.babel.js:1
(function (exports, require, module, __filename, __dirname) { import webpack from 'webpack';
^^^^^^
SyntaxError: Unexpected token import
I'm guessing this is because babel-loader
doesn't act on webpack.config.babel.js
, and so it's not recognising the import
keyword. The error does not appear when { "modules": false }
is removed, but I want that functionality. How can I get Babel to recognise webpack.config.babel.js
?
The following worked for me.
Set .babelrc
to the following:
{
"presets": ["es2015"]
}
The .babelrc
settings would apply to the webpack.config.babel.js
file.
Next, change the Webpack configuration to include the options you want applied to your application code.
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
"presets": [["es2015", {"modules": false}], "react"]
}
}
]
}
]
},