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

For a simple project, when running npm install and npm start, my
default web browser¹ opens, and I hit F12 to see
two types of error messages in the console.

As you can see, 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 believe these errors are related to ReactJS, which under the hood
uses Webpack.

I have seen these errors elsewhere, sometimes with a reference to
version issues for ReactJS and/or Webpack.
For more examples, see the list of references below.
Some of those links (questions) might be related to the issues here,
but I am not sure.

I provide my .eslintrc.json and package.json files 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"
  }
}

Contents hide

References

Answers:

Method 1

Update all npm packages to their latest versions

A. Globally install npm-check-updates

B. Check for the latest versions

C. Install the latest versions

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

Reference

References

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Update all `npm` packages to their latest versions

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

A. Globally install `npm-check-updates`

In the command line, run:
¹

npm install --global npm-check-updates

B. Check for the latest versions

Now preview what packages npm-check-updates would upgrade. Run:
²

npm-check-updates

If that list looks OK, go ahead and write the latest package versions
to your package.json by running:

npm-check-updates --upgrade

Here is what it looks like in Windows 10:

C. Install the latest versions

In the command line, run:
³

npm install

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

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!

Now there are no errors in the browser.

And the terminal says 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 both 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 in about 10-15 seconds.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating