React JS : Module build failed: SyntaxError: Unexpected token

Question

I recently wanted to shift my sample app created using react-create-app to an existing React project.

I am using the react-autosuggest library to render a simple search bar.

While exporting the files to my existing react project, I get the following error:

   Module build failed: SyntaxError: Unexpected token (126:11)

  124 |   }
  125 | 
> 126 |   onChange = (event, { newValue }) => {
      |            ^
  127 |     this.setState({
  128 |       value: newValue
  129 |     });

BabelLoaderError: SyntaxError: Unexpected token (126:11)

  124 |   }
  125 | 
> 126 |   onChange = (event, { newValue }) => {
      |            ^
  127 |     this.setState({
  128 |       value: newValue
  129 |     });

The code is part of the react-autosuggest library

The only difference I see in the projects is their devDependencies, in package.json.

Here's the package.json for the project that's working:

{
  "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"
  }
}

Here's the one that has the error:

{
  "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": <my project's git url>
  },
  "engines": {
    "node": ">=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"
  }
}

Answer 1

I think it is because you are using the Class instance fields syntax that is in stage-2, but you are using the Babel stage-3 preset (good idea to post your package.json!)

Check it out here. If you enable stage-2, you will see that the error goes away.