ReactJS Module build failed: SyntaxError: Unexpected token - reactjs

Question

I try to make ReactJS code but it fails to compile, I am with webpack-devserver.
My terminal return me :
ERROR in ./src/App.jsx Module build failed:
SyntaxError: Unexpected token
My webpack.config, App.js and package.json seems to be good to me.
I think I have make a well appeal to my modules.
Here my App.js :
import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Link} from 'react-router-dom';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Route path='/' render={
()=> {
return (<h1> Welcome Home </h1> ) ;
}
}/>
</div>
</Router>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
Here my webpack.config.js :
const webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: {
app: __dirname +'/src/App.jsx'
},
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
module: {
rules: {
test: /\.jsx$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: "es2015", "stage-0", "react"]
}
}
]
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
}
]}
]},
(...)
};
My package.json :
devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2015-node4": "^2.1.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-router-dom": "^4.2.2",
}

Answer 1

Hi all I have resolve my problem by reset my code completly.
Basically, I had defaults on my webpack.config.js, littles severals errors causing crash, and I have reset my package.json and App.jsx. I have ensured the name of files and their extension follows exactly the content concerned (not js for jsx, and all).
I have create a modulate structure with component (App.jsx) and a render (index.jsx).
So here my new configuration :
webpack.config.js :
const webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: {
app: __dirname +'/src/index.jsx'
},
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
module: {
rules: [ {
test: /\.js|jsx$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ["es2015", "stage-0", "react"]
}
}
]
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
}
]}
]},
optimization : {
splitChunks: {
chunks: "async",
minSize: 3000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
},
devServer: {
contentBase: __dirname +'/dist'
}
};
my package.json :
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "./node_modules/.bin/nodemon ./server.js",
"build": "webpack-dev-server" ,
"watch": "webpack --watch",
"babelrc": "./node_modules/.bin/babelrc-to-install"
}
my App.jsx :
import React, { Component } from 'react';
import './App.css';
import {
BrowserRouter as Router,
Route,
Link,
NavLink,
Redirect,
Switch,
} from 'react-router-dom';
import User from './pages/user/user'
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Route path='/' render={
()=> {
return (<h1> Welcome Home </h1> ) ;
}
}/>
</div>
</Router>
);
}
}
export default App;
my index.jsx :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Works like a charm.

Answer 2

I have tried with the following code , it works fine , try changing ReactDOM.render to the following and let me know , if not working will check other faults
import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { render } from 'react-dom';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Route path='/' render={
() => {
return (<h1> Welcome Home </h1>);
}
} />
</div>
</Router>
);
}
}
render(<App />, document.getElementById('root'));