【发布时间】：2016-06-16 17:10:35
【问题描述】：
我有一个使用 React 和 Webpack 编写的项目，当我尝试运行我的构建时，我收到“Unexpected Token”错误。奇怪的是，我的一台机器上出现了这个错误，而另一台机器上却没有。
背景：
我有两种不同的环境。
一台是我的开发机（Windows 10专业版）
另一个是我的构建服务器（Windows 10 标准）
在两台机器上，我都完全卸载了 Node、npm 等。我重新安装了最新版本的 Node（Node 版本 6.2.1，npm 版本 3.9.3）。
当我在开发环境中运行构建命令时，一切正常。当我在构建环境上运行构建时，我收到一个错误“意外令牌。您可能需要适当的加载程序来处理此文件时间”）。
似乎是在尝试使用 babel 中的 jsx 时发生错误。
我的 webpack.prod.config.js 文件如下所示：
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
main: [
'./dev/js/app/app',
]
},
output: {
filename: 'scripts.js',
path: './.tmp/js/',
publicPath: '/js/'
},
resolve: {
modulesDirectories: ['node_modules'],
root: path.resolve('./dev/js/app'),
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|build)/,
loader: 'babel'
},
{
test: /\.jsx?$/,
loader: "eslint-loader",
exclude: /(node_modules|build)/
},
{
"test": /\.json$/,
"loader": "json"
},
],
eslint: {
configFile: '.eslintrc.js'
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
// This has effect on the react lib size
'NODE_ENV': JSON.stringify('production'),
}
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurrenceOrderPlugin(true),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: {
screw_ie8: true,
warnings: false
},
comments: false
}),
new webpack.IgnorePlugin(/regenerator|nodent|js\-beautify/, /ajv/),
],
};我的 package.json 如下所示：
{
"name": "ridesystems-admin",
"version": "0.0.1",
"description": "Ride Systems Admin App",
"private": true,
"main": "start.js",
"scripts": {
"start": "node --use_strict start.js",
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "npm run webpack-dev & npm run watch-sass",
"webpack-dev": "webpack-dev-server --progress --colors --inline --content-base dev/ --history-api-fallback",
"watch-sass": "nodemon -e scss -x \"npm run compile-sass\"",
"compile-sass": "node-sass --include-path scss dev/css/scss/main.scss dev/css/main.css --sourceMap true",
"build": "npm run clean-build && npm run copy && npm run build:styles && npm run build:scripts && npm run reversion",
"build:styles": "npm run build-sass",
"build:scripts": "npm run pack-js && npm run uglify-js",
"copy": "npm run copy:dist",
"copy:dist": "cpx \"./dev/**/*.{html,png,gif,jpg,ico,asp}\" ./build/",
"reversion": "node ./bin/reversion",
"clean-build": "rimraf build",
"build-sass": "node-sass --include-path scss dev/css/scss/main.scss build/css/main.css --outputStyle compressed",
"pack-js": "webpack --config ./webpack.prod.config.js",
"uglify-js": "mkdirp build/js && uglifyjs .tmp/js/scripts.js > build/js/scripts.js --screw-ie8"
},
"author": "John Reynolds",
"devDependencies": {
"babel-core": "^6.9.1",
"babel-eslint": "^6.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-syntax-decorators": "^6.5.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-1": "^6.5.0",
"clean-css": "^3.4.17",
"cpx": "^1.2.1",
"eslint": "^2.12.0",
"eslint-config-standard": "^5.1.0",
"eslint-config-standard-react": "^2.4.0",
"eslint-loader": "^1.3.0",
"eslint-plugin-promise": "^1.3.2",
"eslint-plugin-react": "^5.1.1",
"eslint-plugin-standard": "^1.3.2",
"json-loader": "^0.5.4",
"mkdirp": "^0.5.1",
"node-sass": "3.7.0",
"node-version-assets": "^1.1.0",
"nodemon": "^1.9.1",
"rimraf": "^2.5.2",
"serve-static": "^1.11.1",
"uglifyjs": "^2.4.10",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"webpack-notifier": "^1.3.0"
},
"dependencies": {
"ajv": "^4.1.3",
"animate-sass": "git+https://github.com/tgdev/animate-sass.git",
"axios": "^0.12.0",
"babel-preset-react": "^6.5.0",
"bootstrap-sass": "^3.3.6",
"classnames": "^2.2.5",
"font-awesome": "^4.6.3",
"jquery": "^3.0.0",
"lodash": "^4.13.1",
"moment": "^2.13.0",
"querystring": "^0.2.0",
"react": "^15.1.0",
"react-addons-css-transition-group": "^15.1.0",
"react-body-classname": "^1.0.1",
"react-dom": "^15.1.0",
"react-redux": "^4.4.5",
"react-router": "^2.4.1",
"react-router-redux": "^4.0.5",
"redux": "^3.5.2",
"redux-form": "^5.2.5",
"redux-thunk": "^2.1.0"
}
}任何想法可能导致此错误？
这是我从 Node 得到的输出：
ERROR in ./dev/js/app/app.js
Module parse failed: C:\TeamCity\buildAgent\work\9785690cbd035ffb\dev\js\app\app.js Unexpected token (27:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (27:2)
at Parser.pp.raise (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:923:13)
at Parser.pp.unexpected (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:1490:8)
at Parser.pp.parseExprAtom (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:333:12)
at Parser.pp.parseExprSubscripts (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:228:19)
at Parser.pp.parseMaybeUnary (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:207:17)
at Parser.pp.parseExprOps (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:154:19)
at Parser.pp.parseMaybeConditional (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:136:19)
at Parser.pp.parseMaybeAssign (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:112:19)
at Parser.pp.parseExprList (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:660:23)
at Parser.pp.parseSubscripts (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:252:29)
at Parser.pp.parseExprSubscripts (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:231:15)
at Parser.pp.parseMaybeUnary (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:207:17)
at Parser.pp.parseExprOps (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:154:19)
at Parser.pp.parseMaybeConditional (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:136:19)
at Parser.pp.parseMaybeAssign (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:112:19)
at Parser.pp.parseExpression (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:88:19)
at Parser.pp.parseStatement (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:1771:23)
at Parser.pp.parseTopLevel (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:1666:21)
at Parser.parse (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:1632:17)
at Object.parse (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:885:44)
at Parser.parse (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\webpack\lib\Parser.js:902:15)
at DependenciesBlock.<anonymous> (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\webpack\lib\NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
at nextLoader (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
at C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
at Storage.finished (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
at C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\graceful-fs\graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3)
@ multi main【问题讨论】：
-
当你
rm -rf node_modules/; npm i时会发生什么？ -
能否添加错误的痕迹？知道它是在哪里提出的会很有趣。
-
我删除了 Node_Modules 文件夹，再次运行 npm install，但在尝试构建时出现同样的错误。
-
感谢您的反馈。我在上面的帖子中包含了 npm 输出。
-
尝试更新到最新版本的 NPM。在更新到 3.10.3 之前，我遇到了类似的问题，然后
rm -rf node_modules | npm i神奇地修复了所有问题。
标签： node.js npm webpack babeljs