title: React JS : Module build failed: SyntaxError: Unexpected token
body: <p>I recently wanted to shift my sample app created using <code>react-create-app</code> to an existing React project. </p>
  
  <p>I am using the <code>react-autosuggest</code> library to render a simple search bar. </p>
  
  <p>While exporting the files to my existing react project, I get the following error:</p>
  
  <pre><code>   Module build failed: SyntaxError: Unexpected token (126:11)
  
    124 |   }
    125 | 
  &gt; 126 |   onChange = (event, { newValue }) =&gt; {
        |            ^
    127 |     this.setState({
    128 |       value: newValue
    129 |     });
  
  BabelLoaderError: SyntaxError: Unexpected token (126:11)
  
    124 |   }
    125 | 
  &gt; 126 |   onChange = (event, { newValue }) =&gt; {
        |            ^
    127 |     this.setState({
    128 |       value: newValue
    129 |     });
  </code></pre>
  
  <p>The code is part of the <a href="https://github.com/moroshko/react-autosuggest" rel="nofollow noreferrer">react-autosuggest</a> library </p>
  
  <p>The only difference I see in the projects is their devDependencies, in package.json. </p>
  
  <p>Here's the package.json for the project that's working:</p>
  
  <pre><code>{
    "name": "autosuggestapp",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "react": "^15.6.1",
      "react-autosuggest": "^9.2.0",
      "react-dom": "^15.6.1"
    },
    "devDependencies": {
      "react-scripts": "1.0.7"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"
    }
  }
  </code></pre>
  
  <p>Here's the one that has the error:</p>
  
  <pre><code>{
    "name": "my-app",
    "version": "0.0.1",
    "description": "my app",
    "readme": "./README.md",
    "dependencies": {
      "babel-polyfill": "6.22.0",
      "history": "4.5.1",
      "invariant": "2.2.2",
      "lodash": "4.17.4",
      "node-sass": "^3.13.1",
      "query-string": "4.3.1",
      "react": "15.4.2",
      "react-autosuggest": "^9.3.0",
      "react-dom": "15.4.2",
      "react-redux": "5.0.2",
      "react-tooltip": "3.2.7",
      "redux": "3.6.0",
      "redux-saga": "0.14.3",
      "reselect": "2.5.4",
      "sn-http-request": "0.0.16"
    },
    "devDependencies": {
      "babel-cli": "6.22.2",
      "babel-core": "6.22.1",
      "babel-eslint": "7.1.1",
      "babel-loader": "6.2.10",
      "babel-preset-es2015": "6.22.0",
      "babel-preset-react": "6.22.0",
      "babel-preset-stage-3": "6.17.0",
      "case-sensitive-paths-webpack-plugin": "1.1.4",
      "colors": "1.1.2",
      "cross-env": "3.1.3",
      "css-loader": "0.26.1",
      "eslint": "3.14.1",
      "eslint-loader": "1.6.1",
      "eslint-plugin-import": "2.2.0",
      "eslint-plugin-jsx-a11y": "3.0.2",
      "eslint-plugin-react": "6.9.0",
      "extract-text-webpack-plugin": "1.0.1",
      "fs-extra": "0.30.0",
      "glob": "7.1.1",
      "jasmine-reporters": "2.2.0",
      "jest": "18.1.0",
      "jest-cli": "18.1.0",
      "lodash-webpack-plugin": "0.11.0",
      "mkdirp": "0.5.1",
      "moment": "2.15.1",
      "node-sass": "4.5.0",
      "npm-run-all": "3.1.0",
      "q": "1.4.1",
      "replacestream": "4.0.2",
      "sass-loader": "4.0.2",
      "stringify-object": "3.1.0",
      "through2": "2.0.1",
      "watch": "1.0.1",
      "webpack": "1.14.0",
      "xml2js": "0.4.17",
      "yargs": "6.0.0"
    },
    "repository": {
      "type": "git",
      "url": &lt;my project's git url&gt;
    },
    "engines": {
      "node": "&gt;=6.9.0"
    },
    "jest": {
      "testPathIgnorePatterns": [
        "/node_modules/",
        "/target/"
      ],
      "setupTestFrameworkScriptFile": "./tool/jasmine.env.js"
    },
    "scripts": {
      "clean-target": "babel-node ./tool/build.cleanup.js",
      "build:resources": "babel-node ./tool/buildResources.js",
      "build:js": "babel-node ./tool/buildJs.js",
      "intl": "babel-node ./tool/intl",
      "build:intl": "npm-run-all build:resources intl",
      "watch": "babel-node ./tool/watcher.js",
      "watch-quick": "babel-node ./tool/watcher.js -q",
      "prebuild": "npm run clean-target",
      "build": "npm-run-all --parallel build:intl build:js",
      "build:watch": "npm-run-all build:intl watch",
      "start": "npm-run-all prebuild build:resources watch-quick",
      "test": "echo 'Do not run jest until fixed'",
      "test:watch": "npm run test -- --watch"
    }
  }
  </code></pre>