Webpack with babel-loader not recognizing import keyword
Solution 1
This looks like a case of operator error. My webpack.config.js
structure was not correct. Specifically, I needed to put the loader details inside of a module
section:
module.exports = {
entry: './src/admin/client/index.jsx',
output: {
filename: './src/admin/client/static/js/app.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
optional: ['runtime']
}
}
],
resolve: {
extensions: ['', '.js', '.jsx']
}
}
};
Solution 2
I fixed the same problem by including the es2015 and react presets and then adding them to the webpack.config.js file.
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
as explained in this post: https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html
my full webpack.config.js file:
module.exports = {
context: __dirname + "/src",
entry: './main',
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['es2015', 'react']
}
}
],
resolve: {
extensions: ['.js', '.jsx']
}
}
};
Solution 3
What is the version of your babel?If babel version is up to 6+.You need to identify the preset 'es2015' and 'react' like this
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['react', 'es2015']
}
}
]
}
Don't forget to install these modules:
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
Comments
-
Jacob over 4 years
I have this
webpack.config.js
:module.exports = { entry: './src/admin/client/index.jsx', output: { filename: './src/admin/client/static/js/app.js' }, loaders: [ { test: /\.jsx?$/, loader: 'babel', exclude: /node_modules/, query: { optional: ['runtime'] } } ], resolve: { extensions: ['', '.js', '.jsx'] } };
...yet I still get this error:
$ webpack -v Hash: 2a9a40224beb025cb433 Version: webpack 1.10.5 Time: 44ms [0] ./src/admin/client/index.jsx 0 bytes [built] [failed] ERROR in ./src/admin/client/index.jsx Module parse failed: /project/src/admin/client/index.jsx Line 1: Unexpected reserved word You may need an appropriate loader to handle this file type. | import React from 'react'; | import AdminInterface from './components/AdminInterface';
I have:
- Installed
webpack
globally and locally - Installed
babel-loader
,babel-core
, andbabel-runtime
- Installed
babel-loader
globally, just in case
Why the hell is webpack seemingly ignoring
babel-loader
? Or doesbabel-loader
not work with modules?Update:
It looks like
babel
handles the input file just fine. When I run:./node_modules/babel/bin/babel.js ./src/admin/client/index.jsx
...it outputs ES5 as expected. Therefore, it seems to me like somehow
webpack
isn't properly loadingbabel-loader
. - Installed