javascript - npm start 上出现意外 token 错误的模块构建失败 - React/webpack

Question

我正在尝试按照我在网上找到的本教程创建我的第一个 React 应用程序: http://jmfurlott.com/tutorial-setting-up-a-single-page-react-web-app-with-react-router-and-webpack/ 。

但是我在完成后遇到了问题。当我在命令行中执行“npm start”时，我不断收到此错误:

ERROR in ./js/app.js Module build failed: SyntaxError: /Users/justinkruse/nike-plus-api/js/app.js: Unexpected token (10:6)

app.js:

import React from 'react';  
import Router from 'react-router';  
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';

import LoginHandler from './components/Login.js';

var App = React.createClass({  
  render: function() {
    return (
      <div className="nav"> //error points here at opening <
        <Link to="app">Home</Link>
        <Link to="login">Login</Link>

        <RouteHandler/>
      </div>
    );
  }
});

var routes = (  
  <Route name="app" path="/" handler={App}>
    <Route name="login" path="/login" handler={LoginHandler}/>
  </Route>
);

Router.run(routes, function (Handler) {  
  React.render(<Handler/>, document.body);
});

package.json:

{
  "name": "foobar",
  "version": "1.0.0",
  "description": "application foobar",
  "main": "index.js",
  "scripts": {
  "start": "webpack-dev-server --hot --progress --colors",
  "build": "webpack --progress --colors",
  "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Justin Kruse",
"license": "ISC",
"devDependencies": {
  "babel-core": "^6.3.26",
  "babel-loader": "^6.2.0",
  "babel-preset-es2015": "^6.3.13",
  "babel-preset-react": "^6.3.13",
  "history": "^1.17.0",
  "react": "^0.14.3",
  "react-hot-loader": "^1.3.0",
  "react-router": "^1.0.3",
  "webpack": "^1.12.9",
  "webpack-dev-server": "^1.14.0"
},
"dependencies": {
  "history": "1.17.0"
  }
}

webpack.config.js:

var webpack = require('webpack');  
module.exports = {  
  entry: [
    'webpack/hot/only-dev-server',
    "./js/app.js"
  ],
  output: {
      path: __dirname + '/build',
      filename: "bundle.js"
  },
  module: {
      loaders: [
          { test: /\.js?$/, loader: 'babel', exclude: /node_modules/,
              query:
                {
                  presets:['react','es2015']
                } 
          },
          { test: /\.js?$/,loaders:['react-hot'], exclude: /node_modules/},
          { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
          { test: /\.css$/, loader: "style!css" }
      ]
  },
  plugins: [
    new webpack.NoErrorsPlugin()
  ]
};

有人问了类似的问题 here ，但它似乎已经死了。

Answer 1

您正在通过 babel 处理所有 .js 文件两次。一种使用 react 预设:

 { test: /\.js?$/, loader: 'babel', exclude: /node_modules/,
     query:
       {
         presets:['react','es2015']
       } 
 },

另一个没有:

{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},

后者可能会给您带来错误，因为该加载程序无法理解 JSX。只需删除它即可。

顺便说一句:我会看一下 react-hot-boilerplate如果你想玩一下React热模块重载。

你需要这样的东西。但请再次检查上面的链接以获取更详细的配置。

webpack.config.js

var webpack = require('webpack');  
module.exports = {  
  entry: [
    'webpack/hot/only-dev-server',
    "./js/app.js"
  ],
  output: {
      path: __dirname + '/build',
      filename: "bundle.js"
  },
  module: {
      loaders: [
          { test: /\.js?$/,loaders:['react-hot', 'babel'], exclude: /node_modules/},
          { test: /\.css$/, loader: "style!css" }
      ]
  },
  plugins: [
    new webpack.NoErrorsPlugin()
  ]
};

.babelrc

{
  "presets": ["es2015", "react"]
}

作为旁注。 JavaScript 中的事情进展得很快...只是通知一下 react-hot-loader即将被弃用，取而代之的是 react-transform .