1

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

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

1 Comment

Thank you @tay-yang-shun

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.