javascript reactjs npm eslint create-react-app

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

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

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 referring to version issues of the packages in package.json.
See the reference list below. I believe references 3-6 may be 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

^{¹
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.}

Solution

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