.babelrc not working #552
Description
I have folled a very simple tutorial to set up webpack, babel and react, but get an error with the presets when I use a .babelrc file.
webpack.config.js:
var path = require('path');
module.exports = {
entry: './src/index.js', // Bundle all assets from this location together
output: {
filename: 'bundle.js', // Output to this file
path: path.resolve( __dirname, 'dist' ) // In this location
},
module: {
rules: [
{
test: /\.(js|jsx|mjs)$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
devServer: {
contentBase: path.resolve(__dirname, "dist")
}
};
.babelrc:
{
"presets": ["env", "react"]
}
Gets me the following error:
ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token (17:12)
15 | render() {
16 | return (
> 17 | <div style={ { textAlign: 'center' } }>
| ^
If I change my webpack.config.js file to this instead it works:
var path = require('path');
module.exports = {
entry: './src/index.js', // Bundle all assets from this location together
output: {
filename: 'bundle.js', // Output to this file
path: path.resolve( __dirname, 'dist' ) // In this location
},
module: {
rules: [
{
test: /\.(js|jsx|mjs)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react']
}
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
devServer: {
contentBase: path.resolve(__dirname, "dist")
}
};
From my understanding having the options object or a .babelrc file should do the same thing. But only one of them works.
I don't have a "babel": {} block within my package.json so I really don't see why it seems that the .babelrc file is not recognized.