CODEWITHSUNDEEP
javascriptreactjsreact-redux
Antonio
Antonio

Reputation: 751

React with Redux: Module build failed: SyntaxError: Unexpected token <

I'm trying to follow a simple tutorial found on Udemy. For some reason the example code is working (probably because the tutorial is slightly out of date). I've done some googling about

Here is the output when trying to start the server.

ERROR in ./index.js
Module build failed: SyntaxError: Unexpected token (9:4)

   7 | function render(){
   8 |   ReactDOM.render(
>  9 |     <Examples/>,
     |     ^
  10 |     document.getElementById('root')  
  11 |   )
  12 | }

 @ multi main

My package.json:

{
  "name": "redux",
  "version": "3.6.0",
  "description": "Predictable state container for JavaScript apps",
  "browser": "dist/redux.js",
  "main": "lib/index.js",
  "module": "es/index.js",
  "jsnext:main": "es/index.js",
  "typings": "./index.d.ts",
  "files": [
    "dist",
    "lib",
    "es",
    "src",
    "index.d.ts"
  ],
  "scripts": {
    "clean": "rimraf lib dist es coverage",
    "lint": "eslint src test build",
    "test": "cross-env BABEL_ENV=commonjs jest",
    "test:watch": "yarn test -- --watch",
    "test:cov": "yarn test -- --coverage",
    "build:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
    "build:es": "cross-env BABEL_ENV=es babel src --out-dir es",
    "build:umd": "cross-env BABEL_ENV=es NODE_ENV=development rollup -c -i src/index.js -o dist/redux.js",
    "build:umd:min": "cross-env BABEL_ENV=es NODE_ENV=production rollup -c -i src/index.js -o dist/redux.min.js",
    "build": "yarn run build:commonjs && yarn run build:es && yarn run build:umd && yarn run build:umd:min",
    "prepublish": "yarn run clean && yarn run lint && yarn test && yarn run build && check-es3-syntax lib/ dist/ --kill --print",
    "examples:build": "babel-node examples/buildAll.js",
    "examples:lint": "eslint examples",
    "examples:test": "CI=true babel-node examples/testAll.js",
    "docs:clean": "rimraf _book",
    "docs:prepare": "gitbook install",
    "docs:build": "yarn run docs:prepare && gitbook build -g reactjs/redux && cp logo/apple-touch-icon.png _book/gitbook/images/apple-touch-icon-precomposed-152.png && cp logo/favicon.ico _book/gitbook/images",
    "docs:watch": "yarn run docs:prepare && gitbook serve",
    "docs:publish": "yarn run docs:clean && yarn run docs:build && cp CNAME _book && cd _book && git init && git commit --allow-empty -m 'update book' && git checkout -b gh-pages && touch .nojekyll && git add . && git commit -am 'update book' && git push [email protected]:reactjs/redux gh-pages --force"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/reactjs/redux.git"
  },
  "keywords": [
    "redux",
    "reducer",
    "state",
    "predictable",
    "functional",
    "immutable",
    "hot",
    "live",
    "replay",
    "flux",
    "elm"
  ],
  "authors": [
    "Dan Abramov <[email protected]> (https://github.com/gaearon)",
    "Andrew Clark <[email protected]> (https://github.com/acdlite)"
  ],
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/reactjs/redux/issues"
  },
  "homepage": "http://redux.js.org",
  "dependencies": {
    "lodash": "^4.2.1",
    "lodash-es": "^4.2.1",
    "loose-envify": "^1.1.0",
    "symbol-observable": "^1.0.3"
  },
  "devDependencies": {
    "babel-cli": "^6.3.15",
    "babel-core": "^6.3.15",
    "babel-eslint": "^7.0.0",
    "babel-jest": "^18.0.0",
    "babel-plugin-check-es2015-constants": "^6.3.13",
    "babel-plugin-transform-es2015-arrow-functions": "^6.3.13",
    "babel-plugin-transform-es2015-block-scoped-functions": "^6.3.13",
    "babel-plugin-transform-es2015-block-scoping": "^6.3.13",
    "babel-plugin-transform-es2015-classes": "^6.3.13",
    "babel-plugin-transform-es2015-computed-properties": "^6.3.13",
    "babel-plugin-transform-es2015-destructuring": "^6.3.13",
    "babel-plugin-transform-es2015-for-of": "^6.3.13",
    "babel-plugin-transform-es2015-function-name": "^6.3.13",
    "babel-plugin-transform-es2015-literals": "^6.3.13",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.3.13",
    "babel-plugin-transform-es2015-object-super": "^6.3.13",
    "babel-plugin-transform-es2015-parameters": "^6.3.13",
    "babel-plugin-transform-es2015-shorthand-properties": "^6.3.13",
    "babel-plugin-transform-es2015-spread": "^6.3.13",
    "babel-plugin-transform-es2015-sticky-regex": "^6.3.13",
    "babel-plugin-transform-es2015-template-literals": "^6.3.13",
    "babel-plugin-transform-es2015-unicode-regex": "^6.3.13",
    "babel-plugin-transform-es3-member-expression-literals": "^6.5.0",
    "babel-plugin-transform-es3-property-literals": "^6.5.0",
    "babel-plugin-transform-object-rest-spread": "^6.3.13",
    "babel-register": "^6.3.13",
    "check-es3-syntax-cli": "^0.1.1",
    "cross-env": "^3.1.4",
    "eslint": "^3.8.1",
    "eslint-config-react-app": "^0.5.0",
    "eslint-plugin-flowtype": "^2.29.2",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "2.2.3",
    "eslint-plugin-react": "^6.8.0",
    "gitbook-cli": "^2.3.0",
    "glob": "^7.1.1",
    "jest": "^18.0.0",
    "rimraf": "^2.3.4",
    "rollup": "^0.41.4",
    "rollup-plugin-babel": "^2.7.1",
    "rollup-plugin-node-resolve": "^2.0.0",
    "rollup-plugin-replace": "^1.1.1",
    "rollup-plugin-uglify": "^1.0.1",
    "rxjs": "^5.0.0-beta.6",
    "typescript": "^1.8.0",
    "typescript-definition-tester": "0.0.4"
  },
  "npmName": "redux",
  "npmFileMap": [
    {
      "basePath": "/dist/",
      "files": [
        "*.js"
      ]
    }
  ],
  "browserify": {
    "transform": [
      "loose-envify"
    ]
  },
  "jest": {
    "testRegex": "(/test/.*\\.spec.js)$"
  }
}

Here is my webpack.config.js file:

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

I did follow this answer in attempt to fix it: babel-loader jsx SyntaxError: Unexpected token

I did npm install babel-preset-react and added the query to my webpack.config file to look like:

module: {
  loaders: [
    {
      test: /\.js$/,
      loaders: [ 'babel' ],
      exclude: /node_modules/,
      include: __dirname,
      query:
          {
              presets:['react']
          }
    }
  ]
}

}

However, this was the error I got after doing that:

$ npm start                                                                                                                           ‹ruby-2.3.0›

> [email protected] start /Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux
> node server.js

==> 🌎  Listening on port 3000. Open up http://localhost:3000/ in your browser.
/Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/webpack-core/lib/LoadersList.js:54
    if(!element.loader || element.loader.indexOf("!") >= 0) throw new Error("Cannot define 'query' and multiple loaders in loaders list");
                                                            ^

Error: Cannot define 'query' and multiple loaders in loaders list
    at getLoadersFromObject (/Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/webpack-core/lib/LoadersList.js:54:65)
    at LoadersList.<anonymous> (/Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/webpack-core/lib/LoadersList.js:78:12)
    at Array.map (native)
    at LoadersList.match (/Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/webpack-core/lib/LoadersList.js:70:19)
    at /Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/webpack/lib/NormalModuleFactory.js:111:68
    at /Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/async/lib/async.js:726:13
    at /Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/async/lib/async.js:52:16
    at done (/Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/async/lib/async.js:246:17)
    at /Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/async/lib/async.js:44:16
    at /Users/NAME/Documents/personal/redux-demo/Redux and React/React & Redux/v01-insert-redux/node_modules/async/lib/async.js:723:17

npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/Cellar/node5/5.12.0/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v5.12.0
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `node server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'node server.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the redux-counter-example package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs redux-counter-example
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls redux-counter-example
npm ERR! There is likely additional logging output above.

Any help would be greatly appreciated

Upvotes: 1

Views: 1918

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281606

Its evident from the error that you cannot define multiple loaders inside loaders, since you have declared loaders inside loaders whereas it should be loader and assigned a single value. Also install and use babel-presets for react, es2015 , stage-0 if you use ES6 like

module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
             presets: ['react', 'es2015', 'stage-0']
        },
        include: __dirname
      }
    ]
  }

Install the presets with 

npm install -S babel-preset-react babel-preset-es2015 babel-preset-stage-0

Upvotes: 2

Related Questions