模块构建失败，npm start 上出现意外令牌错误 - react/webpack答案

【问题标题】：Module Build Failure with Unexpected token error on npm start - react/webpack模块构建失败，npm start 上出现意外令牌错误 - react/webpack
【发布时间】：2015-12-29 22:25:06
【问题描述】：

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

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

./js/app.js 中的错误模块构建失败：语法错误： /Users/justinkruse/nike-plus-api/js/app.js：意外令牌 (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 有人问过类似的问题，但它似乎已经死了。

【问题讨论】：

这在之前的另一个问题中已经说过了，但是本教程对于那些包版本是不正确的

标签： javascript node.js reactjs routes webpack

【解决方案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 module reloading，我会看看 react-hot-boilerplate。

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

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。

【讨论】：