我正在尝试按照Udemy上的简单教程进行操作。由于某种原因，示例代码正在运行（可能是因为教程稍微过时了）。我做了一些关于
的谷歌搜索这是尝试启动服务器时的输出。
ERROR in ./index.js
Module build failed: SyntaxError: Unexpected token (9:4)
7 | function render(){
8 | ReactDOM.render(
> 9 | <Examples/>,
| ^
10 | document.getElementById('root')
11 | )
12 | }
@ multi main
我的package.json：
{
"name": "redux",
"version": "3.6.0",
"description": "Predictable state container for JavaScript apps",
"browser": "dist/redux.js",
"main": "lib/index.js",
"module": "es/index.js",
"jsnext:main": "es/index.js",
"typings": "./index.d.ts",
"files": [
"dist",
"lib",
"es",
"src",
"index.d.ts"
],
"scripts": {
"clean": "rimraf lib dist es coverage",
"lint": "eslint src test build",
"test": "cross-env BABEL_ENV=commonjs jest",
"test:watch": "yarn test -- --watch",
"test:cov": "yarn test -- --coverage",
"build:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
"build:es": "cross-env BABEL_ENV=es babel src --out-dir es",
"build:umd": "cross-env BABEL_ENV=es NODE_ENV=development rollup -c -i src/index.js -o dist/redux.js",
"build:umd:min": "cross-env BABEL_ENV=es NODE_ENV=production rollup -c -i src/index.js -o dist/redux.min.js",
"build": "yarn run build:commonjs && yarn run build:es && yarn run build:umd && yarn run build:umd:min",
"prepublish": "yarn run clean && yarn run lint && yarn test && yarn run build && check-es3-syntax lib/ dist/ --kill --print",
"examples:build": "babel-node examples/buildAll.js",
"examples:lint": "eslint examples",
"examples:test": "CI=true babel-node examples/testAll.js",
"docs:clean": "rimraf _book",
"docs:prepare": "gitbook install",
"docs:build": "yarn run docs:prepare && gitbook build -g reactjs/redux && cp logo/apple-touch-icon.png _book/gitbook/images/apple-touch-icon-precomposed-152.png && cp logo/favicon.ico _book/gitbook/images",
"docs:watch": "yarn run docs:prepare && gitbook serve",
"docs:publish": "yarn run docs:clean && yarn run docs:build && cp CNAME _book && cd _book && git init && git commit --allow-empty -m 'update book' && git checkout -b gh-pages && touch .nojekyll && git add . && git commit -am 'update book' && git push git@github.com:reactjs/redux gh-pages --force"
},
"repository": {
"type": "git",
"url": "https://github.com/reactjs/redux.git"
},
"keywords": [
"redux",
"reducer",
"state",
"predictable",
"functional",
"immutable",
"hot",
"live",
"replay",
"flux",
"elm"
],
"authors": [
"Dan Abramov <dan.abramov@me.com> (https://github.com/gaearon)",
"Andrew Clark <acdlite@me.com> (https://github.com/acdlite)"
],
"license": "MIT",
"bugs": {
"url": "https://github.com/reactjs/redux/issues"
},
"homepage": "http://redux.js.org",
"dependencies": {
"lodash": "^4.2.1",
"lodash-es": "^4.2.1",
"loose-envify": "^1.1.0",
"symbol-observable": "^1.0.3"
},
"devDependencies": {
"babel-cli": "^6.3.15",
"babel-core": "^6.3.15",
"babel-eslint": "^7.0.0",
"babel-jest": "^18.0.0",
"babel-plugin-check-es2015-constants": "^6.3.13",
"babel-plugin-transform-es2015-arrow-functions": "^6.3.13",
"babel-plugin-transform-es2015-block-scoped-functions": "^6.3.13",
"babel-plugin-transform-es2015-block-scoping": "^6.3.13",
"babel-plugin-transform-es2015-classes": "^6.3.13",
"babel-plugin-transform-es2015-computed-properties": "^6.3.13",
"babel-plugin-transform-es2015-destructuring": "^6.3.13",
"babel-plugin-transform-es2015-for-of": "^6.3.13",
"babel-plugin-transform-es2015-function-name": "^6.3.13",
"babel-plugin-transform-es2015-literals": "^6.3.13",
"babel-plugin-transform-es2015-modules-commonjs": "^6.3.13",
"babel-plugin-transform-es2015-object-super": "^6.3.13",
"babel-plugin-transform-es2015-parameters": "^6.3.13",
"babel-plugin-transform-es2015-shorthand-properties": "^6.3.13",
"babel-plugin-transform-es2015-spread": "^6.3.13",
"babel-plugin-transform-es2015-sticky-regex": "^6.3.13",
"babel-plugin-transform-es2015-template-literals": "^6.3.13",
"babel-plugin-transform-es2015-unicode-regex": "^6.3.13",
"babel-plugin-transform-es3-member-expression-literals": "^6.5.0",
"babel-plugin-transform-es3-property-literals": "^6.5.0",
"babel-plugin-transform-object-rest-spread": "^6.3.13",
"babel-register": "^6.3.13",
"check-es3-syntax-cli": "^0.1.1",
"cross-env": "^3.1.4",
"eslint": "^3.8.1",
"eslint-config-react-app": "^0.5.0",
"eslint-plugin-flowtype": "^2.29.2",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-react": "^6.8.0",
"gitbook-cli": "^2.3.0",
"glob": "^7.1.1",
"jest": "^18.0.0",
"rimraf": "^2.3.4",
"rollup": "^0.41.4",
"rollup-plugin-babel": "^2.7.1",
"rollup-plugin-node-resolve": "^2.0.0",
"rollup-plugin-replace": "^1.1.1",
"rollup-plugin-uglify": "^1.0.1",
"rxjs": "^5.0.0-beta.6",
"typescript": "^1.8.0",
"typescript-definition-tester": "0.0.4"
},
"npmName": "redux",
"npmFileMap": [
{
"basePath": "/dist/",
"files": [
"*.js"
]
}
],
"browserify": {
"transform": [
"loose-envify"
]
},
"jest": {
"testRegex": "(/test/.*\\.spec.js)$"
}
}
这是我的webpack.config.js文件：
var path = require('path')
var webpack = require('webpack')
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [
{
test: /\.js$/,
loaders: [ 'babel' ],
exclude: /node_modules/,
include: __dirname
}
]
}
}
我确实按照这个答案试图修复它：babel-loader jsx SyntaxError: Unexpected token
我做了npm install babel-preset-react并将查询添加到我的webpack.config文件中，如下所示：
module: {
loaders: [
{
test: /\.js$/,
loaders: [ 'babel' ],
exclude: /node_modules/,
include: __dirname,
query:
{
presets:['react']
}
}
]
}
}
然而，这是我在做完之后得到的错误：
$ npm start ‹ruby-2.3.0›
> redux-counter-example@0.0.0 start /Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux
> node server.js
==> Listening on port 3000. Open up http://localhost:3000/ in your browser.
/Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/webpack-core/lib/LoadersList.js:54
if(!element.loader || element.loader.indexOf("!") >= 0) throw new Error("Cannot define 'query' and multiple loaders in loaders list");
^
Error: Cannot define 'query' and multiple loaders in loaders list
at getLoadersFromObject (/Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/webpack-core/lib/LoadersList.js:54:65)
at LoadersList.<anonymous> (/Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/webpack-core/lib/LoadersList.js:78:12)
at Array.map (native)
at LoadersList.match (/Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/webpack-core/lib/LoadersList.js:70:19)
at /Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/webpack/lib/NormalModuleFactory.js:111:68
at /Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/async/lib/async.js:726:13
at /Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/async/lib/async.js:52:16
at done (/Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/async/lib/async.js:246:17)
at /Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/async/lib/async.js:44:16
at /Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/async/lib/async.js:723:17
npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/Cellar/node5/5.12.0/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v5.12.0
npm ERR! npm v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! redux-counter-example@0.0.0 start: `node server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the redux-counter-example@0.0.0 start script 'node server.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the redux-counter-example package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs redux-counter-example
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls redux-counter-example
npm ERR! There is likely additional logging output above.
非常感谢任何帮助
答案 0 :(得分：2)
从错误中可以看出，您无法在loaders内定义多个loaders，因为您已在loaders内声明了loaders，而它应该是loader并且分配了一个值。如果您使用ES6，还可以为react，es2015，stage-0安装和使用babel-presets
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'stage-0']
},
include: __dirname
}
]
}
使用
安装预设npm install -S babel-preset-react babel-preset-es2015 babel-preset-stage-0