./index.js 模块构建失败：SyntaxError: Unexpected token

Posted 2023-02-22

【中文标题】./index.js 模块构建失败：SyntaxError: Unexpected token

【英文标题】：ERROR in ./index.js Module build failed: SyntaxError: Unexpected token

【发布时间】：2016-04-09 11:05:49

【问题描述】：

一直试图找出我的设置或代码有什么问题，尝试做 redux 主网站计数器示例，但 index.js 文件中的提供程序有错误？

谁能帮我解决这个问题？谢谢！

Phongs-MacBook-Pro:counter2 phongyewtong$ npm start

> counter@1.0.0 start /Users/phongyewtong/Desktop/counter2
> node server.js

==> ????  Listening on port 3000. Open up http://localhost:3000/ in your browser.
webpack built 7971049e2b70cfeba9b5 in 502ms
Hash: 7971049e2b70cfeba9b5
Version: webpack 1.12.9
Time: 502ms
    Asset     Size  Chunks       Chunk Names
bundle.js  45.2 kB       0       main
chunk    0 bundle.js (main) 7.79 kB [rendered]
    [0] multi main 40 bytes 0 [built] [1 error]
    [1] (webpack)-hot-middleware/client-overlay.js 1.01 kB 0 [built]
    [2] (webpack)-hot-middleware/client.js 3.24 kB 0 [built]
    [3] (webpack)-hot-middleware/~/ansi-regex/index.js 145 bytes 0 [built]
    [4] (webpack)-hot-middleware/~/strip-ansi/index.js 161 bytes 0 [built]
    [5] (webpack)-hot-middleware/process-update.js 2.95 kB 0 [built]
    [6] (webpack)/buildin/module.js 251 bytes 0 [built]

ERROR in ./index.js
Module build failed: SyntaxError: /Users/phongyewtong/Desktop/counter2/index.js: Unexpected token (10:2)
   8 | 
   9 | render(
> 10 |   <Provider store=store>
     |   ^
  11 |     <App />
  12 |   </Provider>,
  13 |   document.getElementById('root')
    at Parser.pp.raise (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/util.js:91:8)
    at Parser.pp.parseExprAtom (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/expression.js:510:12)
    at Parser.pp.parseExprSubscripts (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/expression.js:265:19)
    at Parser.pp.parseMaybeUnary (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/expression.js:245:19)
    at Parser.pp.parseExprOps (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/expression.js:176:19)
    at Parser.pp.parseMaybeConditional (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/expression.js:158:19)
    at Parser.pp.parseMaybeAssign (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/expression.js:121:19)
    at Parser.pp.parseExprListItem (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/expression.js:988:16)
    at Parser.pp.parseCallExpressionArguments (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/expression.js:341:20)
 @ multi main

package.json

  "name": "counter",
  "version": "1.0.0",
  "description": "",
  "scripts": 
    "start": "node server.js"
  ,
  "author": "",
  "license": "ISC",
  "dependencies": 
    "react": "^0.14.5",
    "react-dom": "^0.14.5",
    "react-redux": "^4.0.6",
    "redux": "^3.0.5",
    "redux-thunk": "^1.0.3"
  ,
  "devDependencies": 
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "expect": "^1.13.4",
    "express": "^4.13.3",
    "jsdom": "^7.2.2",
    "mocha": "^2.3.4",
    "node-libs-browser": "^0.5.3",
    "react-addons-test-utils": "^0.14.5",
    "react-transform-hmr": "^1.0.1",
    "webpack": "^1.12.9",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0"
  

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(),
    new webpack.NoErrorsPlugin()
  ],
  module: 
    loaders: [
      
        test: /\.js$/,
        loaders: [ 'babel' ],
        exclude: /node_modules/,
        include: __dirname
      
    ]
  



// When inside Redux repo, prefer src to compiled version.
// You can safely delete these lines in your project.
var reduxSrc = path.join(__dirname, '..', '..', 'src')
var reduxNodeModules = path.join(__dirname, '..', '..', 'node_modules')
var fs = require('fs')
if (fs.existsSync(reduxSrc) && fs.existsSync(reduxNodeModules)) 
  // Resolve Redux to source
  module.exports.resolve =  alias:  'redux': reduxSrc  
  // Compile Redux from source
  module.exports.module.loaders.push(
    test: /\.js$/,
    loaders: [ 'babel' ],
    include: reduxSrc
  )

【问题讨论】：

看起来你的 babel/webpack 设置是错误的，你需要发布你的 webpack 配置的样子（以及 .babelrc，如果你正在使用它）

你使用的是正确的 webpack 配置吗？ (github.com/rackt/redux/blob/master/examples/counter/…)。请记住，您需要运行 webpack 命令

当我运行 webpack 时，我有这个：Phongs-MacBook-Pro:counter2 phongyewtong$ webpack 哈希：7971049e2b70cfeba9b5 版本：webpack 1.12.9 时间：325ms [0] 多主 40 字节 0 [内置] [1 错误] + ./index.js 中的 7 个隐藏模块错误模块构建失败：语法错误：/Users/phongyewtong/Desktop/counter2/index.js：意外令牌 (10:2) 8 | 9 |渲染（> 10 | | ^ 11 | 12 | , 13 | document.getElementById('root')

【参考方案1】：

您必须指定 babel 预设。你可以使用.babelrc

  "presets": [
    "react",
    "es2015"
  ]

或者您可以在加载程序查询中指定它：

loaders: [ 'babel?presets[]=react,presets[]=es2015' ]