I am getting an error every time I run npm start, here is my error....
ERROR in ./app/App.js
Module build failed: SyntaxError: Unexpected token (8:3)
6 | render() {
7 | return (
> 8 | <div>
| ^
9 | Testing this
10 | </div>
11 | )
This is inside a simple react component. For some reason html tags are causing errors in my build. Below is my webpack.config.js and package json file.
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./app/App.js'
],
output: {
path: __dirname + '/public',
filename: "bundle.js"
},
plugins: [HTMLWebpackPluginConfig],
devServer: {
inline:true,
contentBase: './public',
port: 3333
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.scss$/,
loader: 'style!css!sass'
}]
}
};
the package json
{
"name": "lr",
"version": "1.0.0",
"description": "",
"main": "App.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "sam",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.26.1",
"html-webpack-plugin": "^2.25.0",
"sass": "^0.5.0",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-hot-loader": "^1.3.1",
"react-router": "^3.0.0"
}
}
No clue why html tags are throwing errors.
You'll need to inform webpack that you also want it to consume .jsx extensions. Try updating your test pattern:
{
test : /\.(js|jsx)$/,
loaders: ['babel'],
include: path.join(__dirname, 'src')
}
You also need a .babelrc file to then inform babel how you'd like it to perform the compilation:
{
"presets": ["es2015", "react"]
}
Have a peek here for a working implementation: https://github.com/mikechabot/react-boilerplate