Uncaught ReferenceError: process is not defined / Line 0: Parsing error

Question

For a simple Create React App project, when running npm install and npm start, the default web browser¹ opens. Pressing F12 displays two error messages in the console.

As the screenshot displays, the error messages are:

• Uncaught ReferenceError: process is not defined, and
• Line 0: Parsing error: ImportDeclaration should appear when the mode is ES6 and in the module context.

What should I do to rectify these errors?

---

I have seen these errors elsewhere, sometimes with a reference to version issues of Create React App. See the list of references below. I believe some of those are related to the issues here.

The .eslintrc.json and package.json files are provided below.
But since they will hardly be sufficient to reproduce the error,
here is a link to a zip file containing all the necessary project files. ²

.eslintrc.json :

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ]
  }
}

package.json :

{
  "name": "Uncaught ReferenceError",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.1",
    "@testing-library/user-event": "^7.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "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"
    ]
  },
  "devDependencies": {
    "eslint": "^7.32.0",
    "eslint-plugin-react": "^7.29.2"
  }
}

References

• Create React App (CRA)
• Zip file containing the needed project files
• React Uncaught ReferenceError: process is not defined
• process is not defined on hot reload
• Line 0: Parsing error: Cannot read property 'map' of undefined
• React Typescript: Line 0: Parsing error: Cannot read property 'name' of undefined

---

¹ In my case Google Chrome Version 98.0.4758.102, 64-bit. Running on Windows 10.

² Install the project (locally) by running npm install – this may take about 5-9 minutes.
Then run npm start to open the project in the default web browser.

Answer 1

What should I do to rectify these errors?

Answer: update all npm packages to their latest versions

Try updating all npm packages to their latest versions.
The purpose is to decrease the risk of getting version conflicts.

1. Globally install npm-check-updates

In the command line, run : ¹

npm install --global npm-check-updates

2. Check for the latest versions

Preview what packages npm-check-updates would upgrade : ²

npm-check-updates

If that list looks OK, go ahead and update the packages to their latest versions in your package.json :

npm-check-updates --upgrade

Here is the terminal response in Windows 10:

3. Install the latest versions

In the command line, run: ³

npm install

4. Check for errors in the browser and/or in the terminal

In the command line, run:

npm start

The browser now displays no less than five errors.

The terminal confirms the five errors.

^{^ click to enlarge}

Wow. This looks really, really bad, doesn't it?

Nope. Fear not! – All you need to do now is close the server (Ctrl+C) and run npm start once more.
– If you still see the errors, do it one more time – close the server and run npm start again.
If that doesn't help either, try waiting about 3-7 minutes before you try npm start again.

When I tried this, I no longer had any errors in the browser.

And the terminal reported Compiled successfully!

Yay!

Reference

• npm-check-updates – documentation

---

¹ I am on Windows 10, but I expect all the commands provided here to work just as fine on Linux and macOS.

² To get a list of options, run npm-check-updates --help.

³ Expect the npm install command to take about 3-8 minutes to complete.
But if you run it again, it should complete within 10-15 seconds.