reactjs - 由于神秘的语法错误，NPM 无法构建

Question

我正在尝试学习 React，但构建并没有组合在一起。当我尝试“npm run build”时，我得到了这个：

Version: webpack 3.1.0
Time: 202ms
    Asset    Size  Chunks             Chunk Names
bundle.js  3.5 kB       0  [emitted]  main
   [0] ./src/app.js 738 bytes {0} [built] [failed] [1 error]

ERROR in ./src/app.js
Module build failed: SyntaxError: Unexpected token (5:16)

  3 | import IndecisionApp from "./components/IndecisionApp";
  4 |
> 5 | ReactDOM.render(<IndecisionApp />, document.getElementById('app'));
    |                 ^

我的 package.json：

{
  "name": "indecision-app2",
  "version": "1.0.0",
  "main": "index.js",
  "author": "some person",
  "license": "MIT",
  "description": "",
  "scripts": {
    "serve": "live-server public/",
    "build": "webpack",
    "dev-server": "webpack-dev-server"
  },
  "dependencies": {
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-loader": "7.1.1",
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1",
    "live-server": "^1.2.0",
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "validator": "8.0.0",
    "webpack": "3.1.0",
    "webpack-dev-server": "^2.5.1"
  }
}

我的 webpack.config.js：

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: "bundle.js"
    },
    module: {
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/
        }]
    },
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public')
    }
};

我的 app.js：

import React from "react";
import ReactDOM from "react-dom";
import IndecisionApp from "./components/IndecisionApp";

ReactDOM.render(<IndecisionApp />, document.getElementById('app'));

有人可以帮我理解什么是错的吗？这不应该建吗？几周前，同样的语法也奏效了。

标签： reactjsnpm