ReactとWebpackを使用してプロジェクトを作成しました。ビルドを実行しようとすると、「予期しないトークン」エラーが発生します。これについての奇妙なことは、私が自分のマシンの一つでこのエラーを受け取っているということです。予期しないトークンエラーを与えるWebpack/Babel
背景: 私は2つの異なる環境を持っています。
一つは、他のは私のビルドサーバー(Windowsの10標準)
が、私は再インストールしている私は、NPMなどを完全にアンインストールしたノードを持って、両方のマシンでの最新バージョンである私の開発マシン(Windowsの10プロ) ですノード(ノードバージョン6.2.1、npmバージョン3.9.3)。
開発環境でビルドコマンドを実行すると、すべて正常に動作します。ビルド環境でビルドを実行すると、「予期しないトークン。このファイルを処理するために適切なローダーが必要な場合があります」というエラーが表示されます。
jarファイルで作業しようとしているときにエラーが発生しているようです。
マイ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"
}
}
このエラーの原因は何ですか?場合でもバベルローダーをロードできないように思われるいくつかのWindowsマシン上のノード6+のバグは現在あり
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? –
エラーのトレースを追加できますか?それがどこにあるのか知ることは面白いだろう。 –
Node_Modulesフォルダを削除し、npm installを再度実行しました。ビルドしようとすると同じエラーが発生します。 –