Question

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

但是在完成后我遇到了问题。当我做一个＆nbsp; npm start＆＃39;在命令行中：

./js/app.js中的错误模块构建失败：SyntaxError： /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，但似乎已经死了。

Answer 1

您正在通过Traceback (most recent call last): File "C:/Users/hi/Desktop/class1.py", line 31, in <module> t = Teacher('Mr. Smith', 32, 50000, 9056789056) File "C:/Users/hi/Desktop/class1.py", line 15, in init SchoolMember.__init__(self, name, age) TypeError: __init__() missing 1 required positional argument: 'number' >>>两次处理所有.js个文件。一个使用babel预设：

react

另一个没有：

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

后者是可能给你错误的那个，因为这个加载器无法理解JSX。只需删除它。

BTW：如果你想玩反应热模块重新加载，我会看一下react-hot-boilerplate。

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

webpack.config.js

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

.babelrc

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()
  ]
};

作为旁注。 JavaScript中的事情变得很快......只是为了告知react-hot-loader即将被弃用，而不是react-transform。

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

1 个答案:

webpack.config.js

.babelrc