ReactJS module build error: SyntaxError: Unexpected token - ReactDOM.render
Why am I getting this error below? My claim ReactDOM.render(<App/>, container);
is 100% legal code.
My github repository: https://github.com/leongaban/react_starwars
App.js file
import react from 'react'
import ReactDom from 'react-dom'
import App from 'components/App'
require('index.html');
// Create app
const container = document.getElementById('app-container');
// Render app
ReactDOM.render(<App />, container);
Application components / file
import React from 'react'
const App = () =>
<div className='container'>
<div className='row'>
</div>
<div className='row'>
</div>
</div>;
export default App;
My webpack.config
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: [
'./src/app.js'
],
output: {
path: path.resolve(__dirname, './build'),
filename: 'app.bundle.js',
},
module: {
loaders: [
{
test: /\.html$/,
loader: 'file-loader?name=[name].[ext]',
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
],
},
plugins: [
new webpack.NamedModulesPlugin(),
]
};
Use this as webpack config file
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: [
'./src/app.js'
],
output: {
path: path.resolve(__dirname, './build'),
filename: 'app.bundle.js',
},
module: {
loaders: [
{
test: /\.html$/,
loader: 'file-loader?name=[name].[ext]',
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
],
},
plugins: [
new webpack.NamedModulesPlugin(),
]
};
You are missing presets
I got the same error and I just needed to add a .babelrc file to the project route (in the same location as package.json) containing the following:
{
"presets": [
"env",
"react"
],
"plugins": [
"transform-class-properties"
]
}
Install babel-preset-response for jsx syntax.
npm install babel-preset-react
presets
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
Try adding the property resolve
to your webpack config file:
resolve: {
extensions: ['.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ["babel-loader"]
}
]
}
If anyone is working with CRA and get this error. Here's the solution goes.
Go to package.json
and add configuration babel
. If I don't seem so generous, below is the code
"babel": {
"presets": [
"react-app"
]
}
Leave the CRA setting unchanged. Actually CRA uses its own pre-installed react-app
and what is configured in the file webpack.config.js
. Hence, there is no need for other presets.
Or you can put your presets in a .babelrc file at the root of your project. Of course, you need to install it first.
/path/to/your/project/.babelrc
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }