reactjs - 模块构建失败：SyntaxError: Unexpected token on npm run build

Question

尝试设置博客中描述的 ReactJS 脚本：特别是文件celestial/src/index.jsx：

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Header from './header';
import Footer from './footer';
import Posts from './posts';
import Post from './post';
import Products from './products';
import Product from './product';
import NotFound from './not-found';
import Page from './page';
import LoadingIcon from './loading-icon.gif';
import Placeholder from './placeholder.jpg';

// Load the Sass file
require('./style.scss');

const App = () => (
    <div id="page-inner">
        <Header />
        <div id="content">
            <Switch>
                <Route exact path={CelestialSettings.path} component={Posts} />
                <Route exact path={CelestialSettings.path + 'posts/:slug'} component={Post} />
                <Route exact path={CelestialSettings.path + 'products'} component={Products} />
                <Route exact path={CelestialSettings.path + 'products/:product'} component={Product} />
                <Route exact path={CelestialSettings.path + ':slug'} component={Page} />
                {/* <Route path="*" component={NotFound} /> */}
            </Switch>
        </div>
        <Footer />
    </div>
);

// Routes
const routes = (
    <Router>
        <Route path="/" component={App} />
    </Router>
);

render(
    (routes), document.getElementById('page')
);

但是每当我尝试使用 NPM 构建静态内容时，我都会收到以下错误：

yazid@yazid-Laptop:/Path To Project/wpReactDemo/wp-content/themes/celestial$ npm run build

> celestial@1.0.0 build /Path To Project/wpReactDemo/wp-content/themes/celestial
> webpack

Hash: 39088b4384c54ddfdc01
Version: webpack 3.12.0
Time: 189ms
 Asset     Size  Chunks             Chunk Names
app.js  3.39 kB       0  [emitted]  app
   [0] ./src/index.jsx 917 bytes {0} [built] [failed] [1 error]

ERROR in ./src/index.jsx
Module build failed: SyntaxError: Unexpected token (20:4)

  18 | 
  19 | const App = () => (
> 20 |     <div id="page-inner">
     |     ^
  21 |         <Header />
  22 |         <div id="content">
  23 |             <Switch>

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! celestial@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the celestial@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/yazid/.npm/_logs/2018-09-22T18_27_49_979Z-debug.log

我试图用“return ()”和“{}”改变语法，但我得到了同样的错误。

webpack.config.js 看起来像：

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');

module.exports = {
   entry: {
       app: './src/index.jsx'
   },
   output: {
       path: path.resolve(__dirname, 'dist'),
       filename: '[name].js'
   },
   module: {
       rules: [
           {
               test: /\.scss$/,
               use: ExtractTextPlugin.extract({
                   fallback: 'style-loader',
                   use: ['css-loader','sass-loader'],
                   publicPath: 'dist'
               })
           },
           {
               test: /\.jsx?$/,
               exclude: /node_modules/,
               use: 'babel-loader'
           },
           {
               test: /\.(jpe?g|png|gif|svg)$/i,
               use: [
                   'file-loader?name=[name].[ext]&outputPath=images/&publicPath=http://localhost/wpReactDemo/wp-content/themes/celestial/dist/images',
                   'image-webpack-loader'
               ]
           },
           { test:
               /\.(woff2?|svg)$/,
               loader: 'url-loader?limit=10000&name=fonts/[name].[ext]'
           },
           {
               test: /\.(ttf|eot)$/,
               loader: 'file-loader?name=fonts/[name].[ext]'
           }
       ]
   },
   resolve: {
       extensions: ['.js', '.jsx']
   },
   plugins: [
       new ExtractTextPlugin({
           filename: "style.css",
           allChunks: true
       })
   ]
}

标签： reactjswordpress-rest-api