6

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
  })
}
3
  • Looks like your babel/webpack setup is wrong, you need to post what your webpack config looks like (as well as .babelrc if you're using it) Commented Jan 5, 2016 at 15:07
  • Are you using the correct webpack config? (github.com/rackt/redux/blob/master/examples/counter/…). Remember you need to run the webpack command Commented Jan 5, 2016 at 15:07
  • when i run webpack i have this:Phongs-MacBook-Pro:counter2 phongyewtong$ webpack Hash: 7971049e2b70cfeba9b5 Version: webpack 1.12.9 Time: 325ms [0] multi main 40 bytes {0} [built] [1 error] + 7 hidden modules 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') Commented Jan 5, 2016 at 15:17

1 Answer 1

27

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' ]
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.