React scripts start is giving Unexpected token error

Question

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.

A.K.47 · Accepted Answer · 2019-05-13 11:43:27Z

8

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 -

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.
I installed NVM(Node Version Manager).I used this link How to install NVM in Ubuntu to install the same.
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.
After this I use nvm use 12.0.0(or the node version which you have recently installed).
Check your node version using node -v. It should show the node version which you asked to use in step 4.
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.

answered May 13, 2019 at 11:43

A.K.47

2373 silver badges12 bronze badges

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

2 Comments

fabienbranchel Over a year ago

Same issue. However, I use a node version > 8.0.0 (node 8.2.1, npm 5.3.0 exactly) and it doesn't work. This is server side, on the CI. On my PC, I use node 8.11.1 and npm 5.6.0, no issue...

Ashraf Slamang Over a year ago

In my case I had switched to version 6 of Node earlier in the day and forgot about it :D

LightCC · Accepted Answer · 2020-05-08 03:38:50Z

1

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

edited May 8, 2020 at 3:38

LightCC

12k8 gold badges70 silver badges107 bronze badges

answered Apr 24, 2020 at 17:36

Santhosh Raj Mudulakar

635 bronze badges

Comments

ingenierocps · Accepted Answer · 2020-12-06 21:22:00Z

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.

karel · Accepted Answer · 2021-09-29 04:12:06Z

0

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.

edited Sep 29, 2021 at 4:12

karel

5,96562 gold badges58 silver badges60 bronze badges

answered Sep 28, 2021 at 14:49

samcesa45

271 silver badge6 bronze badges

Comments

Yoruba · Accepted Answer · 2022-10-14 10:02:36Z

0

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

SKIP_PREFLIGHT_CHECK=true
PUBLIC_URL=/

answered Oct 14, 2022 at 10:02

Yoruba

2,8001 gold badge25 silver badges29 bronze badges

Comments

swapnil Sonker · Accepted Answer · 2023-12-28 07:32:23Z

0

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

answered Dec 28, 2023 at 7:32

swapnil Sonker

11 bronze badge

1 Comment

zoran404 Over a year ago

How is this different from the other answers that suggest installing a newer version of node? Also the command you suggested installs node in the project, not globally, which is not something most people want and it does not necessarily install the newest version.

Collectives™ on Stack Overflow

React scripts start is giving Unexpected token error

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related