Ошибка сборки модуля ReactJS: SyntaxError: Неожиданный токен

Question

Я пытаюсь сделать код ReactJS, но он не компилируется, я использую webpack-devserver.

Мой терминал вернет мне:

ОШИБКА в ./src/App.jsx Ошибка сборки модуля: Ошибка синтаксиса: неожиданный токен

Мои webpack.config, App.js и package.json кажутся мне полезными. Я думаю, что я хорошо обращаюсь к своим модулям.

Вот мой 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'));

Вот мой 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

Привет всем, что я решил свою проблему, полностью сбросив код. В основном у меня были значения по умолчанию в моем webpack.config.js, несколько ошибок, приводящих к сбою, и я сбросил мои package.json и App.jsx. Я удостоверился, что имена файлов и их расширение соответствуют точно соответствующему содержанию (не js для jsx и все).

У меня есть модулированная структура с компонентом (App.jsx) и рендерингом (index.jsx).

Итак, вот моя новая конфигурация:

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

Работает как шарм.

Answer 2

Я попытался с помощью следующего кода, он работает нормально, попробуйте изменить ReactDOM.render на следующий и дайте мне знать, если не работает, проверит другие ошибки

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