A.K.47
A.K.47

Reputation: 237

React scripts start is giving Unexpected token error

I have been using create-react-app to bootstrap react apps all this while. But I am facing a really strange issue today. After bootstrapping my app with create-react-app. I am facing the below issue after I run npm start

rbac-tutorial-app/node_modules/@hapi/joi/lib/types/object/index.js:254
                        !pattern.schema._validate(key, state, { ...options, abortEarly:true }).errors) {
                                                                ^^^

SyntaxError: Unexpected token ...
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (rbac-tutorial-app/node_modules/@hapi/joi/lib/types/func/index.js:5:20)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I have already tried - Deleting package.lock.json and deleting node modules and running npm install followed by npm start but the problem remains the same. - Changing my node and npm versions.

NPM version I am using -> 6.9.0 Node version I am using -> v8.0.0

Below is my package.json file

{
  "name": "rbac-tutorial-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Any help would be highly appreciated.

Upvotes: 4

Views: 9604

Answers (6)

swapnil Sonker
swapnil Sonker

Reputation: 1

just run npm install node it will install the latest version of the node to your file and fix the error.

Upvotes: 0

Yoruba
Yoruba

Reputation: 2780

Add this to .env file in the root of the project

SKIP_PREFLIGHT_CHECK=true
PUBLIC_URL=/

Upvotes: 0

samcesa45
samcesa45

Reputation: 27

I had a similar issue. I solved it by creating an .env file on the project root, and pasting this SKIP_PREFLIGHT_CHECK=true inside the .env file.

Upvotes: 0

ingenierocps
ingenierocps

Reputation: 59

When deploying to Heroku I got that same error and after looking for more solutions than the accepted one I found this one apparently easier.

It seemed to be due to the spread operator, available from Node's version 8.6. It suggested to specify a greater that version and greaters in engines section of package.json ("node" : ">=8.6").

After using that solution it complained: 'Dangerous semver range (>) in engines.node', pointing to https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version. This Heroku's support site suggests to use the same version you're locally running but it’s recommended to use an x in the patch to get the latest patch updates. At the end I ended up with "node" : "12.x". This worked fine for me.

Upvotes: 0

Just use below command to resolve the issue:

  • 12.0.0 should be installed before it can be used

    • step 1: first nvm install 12.0.0
    • step 2: nvm use 12.0.0

Note: If node version 12.0.0 is already present, skip step 1

Upvotes: 1

A.K.47
A.K.47

Reputation: 237

After couple of frustrating hours goggling for answers and trying different approaches, I figured it was not the problem with my code but rather problem while bootstrapping with create-react-app using node version v8.0.0.

So I deleted the entire project and followed below steps which solved my issue -

  1. Deleted the entire project. Since I had not written much code so far, So I simply did that. If you have already written a lot of code ,please take a backup.
  2. I installed NVM(Node Version Manager).I used this link How to install NVM in Ubuntu to install the same.
  3. Once nvm is installed use nvm install 12.0.0(or the node version > 8.0.0 which you would like to use). This was actually the issue for me. For create-react-app to bootstrap successfully you should use node version > 8.0.0.
  4. After this I use nvm use 12.0.0(or the node version which you have recently installed).
  5. Check your node version using node -v. It should show the node version which you asked to use in step 4.
  6. That's it. Now you should use create-react-app and bootstrap the app again.

This worked like a charm for me. Hope someone facing same issue will find it helpful.

Upvotes: 8

Related Questions