javascript - 与 Redux react : Module build failed: SyntaxError: Unexpected token <

Question

我正在尝试按照在 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.

任何帮助将不胜感激

Answer 1

从错误中可以明显看出您不能定义多个 loaders里面loaders ，因为你已经声明了 loaders里面loaders而它应该是 loader并赋予一个单一的值(value)。还为 react 安装和使用 babel-presets| , es2015 , stage-0如果你像这样使用 ES6

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