I get an error when building my first react app. I've tried adding react
to the presets of the babel-loader
-section but I can't get it to run it.
The error I get is:
ERROR in ./src/index.js
Module build failed: SyntaxError: D:/Development/react-redux-todo/src/index.js: Unexpected token (11:2)
9 |
10 | render(
> 11 | <Provider store={store}>
| ^
12 | <App />
13 | </Provider>,
14 | document.getElementById('root')
package.json
{
"name": "testing_redux",
"version": "1.0.0",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.5",
"eslint": "^4.5.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-react": "^7.3.0",
"redux": "^3.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
},
"dependencies": {
"lodash.join": "^4.0.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6"
},
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"start": "cross-env NODE_ENV=development webpack-dev-server --open"
},
"babel": {
"plugins": [],
"presets": [
"env",
"stage-3"
]
}
}
My webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader'
}, {
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}, {
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}]
},
resolve: {
extensions: ['.json', '.js', '.jsx', '.css']
},
};