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.

Answer 1

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.

Answer 2

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