ERROR in ./index.js Module build failed: SyntaxError: Unexpected token
26,663
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' ]
Author by
phongyewtong
Love Game and Fluttering Should I use Typescript instead of Javascript?
Updated on July 09, 2022Comments
-
phongyewtong almost 2 years
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 }) }