Question

我尝试制作ReactJS代码，但无法编译，我使用的是webpack-devserver。

我的终端回复了我：

./src/App.jsx中的错误模块构建失败： SyntaxError：意外的令牌

我的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和js的全部）。

我创建了一个带有组件（App.jsx）和一个render（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();

像魅力一样。

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

ReactJS模块构建失败：SyntaxError：意外的令牌

2 个答案: