ReactJS 模块构建失败：SyntaxError: Unexpected token答案

【问题标题】：ReactJS Module build failed: SyntaxError: Unexpected tokenReactJS 模块构建失败：SyntaxError: Unexpected token
【发布时间】：2018-05-09 14:25:28
【问题描述】：

我尝试编写 ReactJS 代码但编译失败，我使用的是 webpack-devserver。

我的终端返回我：

./src/App.jsx 中的错误模块构建失败： SyntaxError: Unexpected token

我的 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",
  }

【问题讨论】：

你能提供行号吗？
我想你忘了导入 ReactDOM 但这不应该导致 SyntaxError
虽然这是一个牵强的猜测，但您可能有隐藏的字符，您的编辑器不会显示它们并且它们可能导致语法错误，请尝试将您的代码粘贴到此链接 soscisurvey.de/tools/view-chars.php 以查看是否隐藏字符

标签： reactjs compilation babeljs

【解决方案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'
    }
    };

我的 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"
  }

我的 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;

我的 index.jsx ：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

像魅力一样工作。

【讨论】：

【解决方案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'));

【讨论】：