ERROR in ./index.js Module build failed: SyntaxError: Unexpected token

Question

Have been trying to figure out what wrong with my setup or code, trying to do redux main website counter examples but there is error on the provider in the index.js file?

Can anyone help me on this? Thanks!

Phongs-MacBook-Pro:counter2 phongyewtong$ npm start

> [email protected] 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
  })
}

Answer 1

You must specify babel presets. You can use .babelrc

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

or you can specify it in your loader query:

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