ReactJS Module build failed: SyntaxError: Unexpected token

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'));