Error in. /index.js Module build error: SyntaxError: Unexpected token

Question

They tried to find out what happened with my setup or code, trying to make examples of links to the main redux websites, but does the provider have an error in the index.js file?

Can someone help me with this? Thanks!

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
  })
}

Answer 1

You must specify the babel presets. you can use.babelrc

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

or you can specify it in the bootloader request:

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