Webpack compiling errors for react files. The compiler seems to throw errors on every react file with the following:
ERROR in ./public/react-components/modules/user/profile/edit.js
Module parse failed: /Workspace/bungaloow/public/react-components/modules/user/profile/edit.js Unexpected token (5:26)
You may need an appropriate loader to handle this file type.
Webpack configuration:
var glob = require('glob');
module.exports = {
entry: glob.sync('./public/react-components/**/*.{js,json}'),
output: {
path: __dirname + '/public/compiled',
filename: "react-components.js"
},
module: {
loaders: [
{test: /\.js$/, loader: 'babel-loader', query: {presets: ['es2015','react']}}
],
rules: [
{
test: /\.json$/,
use: 'json-loader'
},
{
test: /\.js$/,
use: 'babel-loader'
}
]
},
watch: true
};
You're mixing Webpack 1 syntax (module.loaders
) with Webpack 2 syntax (module.rules
). My guess is that you're using Webpack 2 and it's only using module.rules
, so your babel-loader
isn't configured properly.
I believe the correct Webpack 2 syntax would be this:
module: {
rules: [{
test : /\.json$/,
loader : 'json-loader' // `use` is appropriate when you have to chain loaders,
// if there's only a single loader, use `loader`
}, {
test : /\.js$/,
loader : 'babel-loader',
options : { presets : ['es2015', 'react'] }
}]
}
More info here.