Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 browser1. Pressing F12 displays two error messages in the console.

Running 'npm start' gives two errors in the browser.

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

.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


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

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

like image 760
Henke Avatar asked Sep 01 '25 16:09

Henke


1 Answers

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 : 1

npm install --global npm-check-updates

2. Check for the latest versions

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

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:

Upgrading package.json

3. Install the latest versions

In the command line, run: 3

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.

Five errors in the web browser

The terminal confirms the five errors.

Five errors in the terminal

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

NO errors in the web browser!

And the terminal reported Compiled successfully!

The terminal says: 'Compiled successfully!'

Yay!

Reference

  • npm-check-updates – documentation

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

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

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

like image 112
Henke Avatar answered Sep 04 '25 04:09

Henke