React JS : Module build failed: SyntaxError: Unexpected token - reactjs

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.