Uncaught ReferenceError: process is not defined (NOT react-error-overlay) #12212

EnoahNetzach · 2022-03-28T07:51:29Z

Describe the bug

Using the optional chaining operator with process (process?.env) throws a ReferenceError stating that process is not defined.

I originally encountered this behaviour because a dependency is using that syntax, then I tried to write the same in my code and it still breaks.

Note that process.env works, and it doesn't appear to be a problem with react-error-overlay (I also tried to use this fix without success).

A workaround is to add the following in index.tsx:

if (!('process' in window)) {
  // @ts-ignore
  window.process = {}
}

Did you try recovering your dependencies?

I just freshly installed it from scratch using

yarn create react-app temp-app --template typescript

Which terms did you search for in User Guide?

https://github.com/facebook/create-react-app/issues?q=is%3Aissue+uncaught+referenceError%3A+process+is+not+defined
https://github.com/facebook/create-react-app/issues?q=is%3Aissue+process+is+not+defined

Environment

Environment Info:

  current version of create-react-app: 5.0.0
  running from ~/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: macOS 12.2.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.12.0 - ~/.nvm/versions/node/v16.12.0/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.12.0/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.12.0/bin/npm
  Browsers:
    Chrome: 99.0.4844.83
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.3
  npmPackages:
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    react-scripts: 5.0.0 => 5.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

Install CRA yarn create react-app temp-app --template typescript
Add {process?.env?.NODE_ENV} in App.tsx (e.g. in the <p>)

Expected behavior

development is shown

Actual behavior

blank page, the following error in the browser console

Reproducible demo

https://github.com/EnoahNetzach/create-react-app-no-process

The text was updated successfully, but these errors were encountered:

masterbater · 2022-03-31T20:41:38Z

I also encountered this. This is not a bug but intended behavior
https://stackoverflow.com/questions/41359504/webpack-bundle-js-uncaught-referenceerror-process-is-not-defined

. Downgrade to react-scripts@4 or just detach your project and add the config on webpack

EnoahNetzach · 2022-04-01T07:20:39Z

Thanks @masterbater for the answer, but that looks like a different issue, since cra does provide (some of) the env variables through webpack's DefinePlugin.

Indeed process.env.NODE_ENV does work, the issue I'm encountering is with the optional chaining operator.

ghost · 2022-04-15T23:11:29Z

I am getting this error by simply using destructuring in an export.

export const {
  REACT_APP_ABC = "ABC",
  REACT_APP_XYZ = "XYZ",
} = process.env;

ghost · 2022-04-15T23:29:32Z

It doesn't matter if you destructure or use optional chaining, this error just happens whenever you access process outside of a React component as far as I can see.

Klingefjord · 2022-09-03T22:14:01Z

I'm getting this too

masterbater · 2022-09-04T00:22:13Z

You can read how to set env for react. If the cause is a plugin fork it or ask the author to update it

…

On Sun, Sep 4, 2022, 6:14 AM Oliver Klingefjord, ***@***.***> wrote: I'm getting this too — Reply to this email directly, view it on GitHub <#12212 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGI6VFHSCQCRW7VIDQM4FO3V4PETJANCNFSM5R2IFIFQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

lovetingyuan · 2022-09-11T17:25:26Z

this is so stupid... can not believe react team could make such mistake...

SourceCipher · 2022-09-12T13:21:40Z

We are trying to update some libraries and we are getting this issue. Tried to add this

  "overrides": {
    "react-error-overlay": "6.0.9"
  }

to package.json and do a clean install, but no changes. We cant update react-scripts as it will crash whole project. How is this an issue?

enoguchi-lmi · 2022-09-24T06:14:19Z

this issue happens on a clean installation of CRA 5.0.1 whether trying to use process inside the component or not. None of the proposed solutions worked for me including using react error overlay 6.0.9 or yarn

abhi-dasgupta · 2022-09-27T17:27:20Z

tried everything else, but still stuck with this exact issue

Veeenz · 2022-09-29T07:45:03Z

No way to solve this. It's totaly frustrating. How are we supposed to start another project with CRA if there are those incredible issues?

masterbater · 2022-09-30T03:03:47Z

No way to solve this. It's totaly frustrating. How are we supposed to start another project with CRA if there are those incredible issues?

If your project or library doesnt follow this practice then you will encounter this. Please loo at this documentation https://create-react-app.dev/docs/adding-custom-environment-variables/

arpit-ma · 2022-10-03T11:36:06Z

From last 2 days tried everything which is avail in internet, but still stuck with the same issue

zithokamvalethu · 2022-10-04T07:31:23Z

How did you solve it a day later I have the same issue.

HannanHan · 2022-10-05T12:43:21Z

Stupid error,still stuck with this exact issue.

sourcecode71 · 2022-10-05T13:39:49Z

I have used all ( with "react-scripts": "^5.0.1").
"resolutions": {
"react-error-overlay": "^6.0.11"
},

"scripts":{
"preinstall": "npx npm-force-resolutions",
....
},

"devDependencies":{
"react-error-overlay": "^6.0.11",
...
}

Not working. I think react-scripts v4 using is not a solution.
Now using
const { env } = require('process');
env.NODE_ENV to solve the problem.

iweurman · 2022-10-18T17:23:00Z

If you possibly use process?.env?.etc remove the question marks so process.env.etc

dbuchet · 2022-12-08T13:57:35Z

For people still stuck with that error, here is how I fixed it.
I used craco because did not want to eject from RS.
Then in the craco.config.js having this:

const webpack = require('webpack');

module.exports = {
    webpack: {
        plugins: {
            add: [
                new webpack.ProvidePlugin({
                    process: 'process/browser.js',
                })
            ]
        },
        configure: {
            resolve: {
                fallback: {
                    'fs': false,
                    'path': false,
                    'crypto': false,
                }
            },
        },
    },
};

You might not need to have the configure.resolve.fallback part, but if you're stuck with error like "fs/path/crypto" is not defined, you have the resolution here too :)

You'll also need to have process as dev dependency

yarn add -D process

joelgrimberg · 2022-12-24T17:40:39Z

any update on this from the CRA team? |
feels like not so many people use the process therefore this is still an open issue?

Decryptus007 · 2023-01-03T22:42:03Z

I'm facing this issue using Vite + React

Ronald-patrick · 2023-01-12T16:41:10Z

I'm facing this issue using Vite + React

Vite uses different syntax

import.meta.env.VITE_API_URL instead of process.env.

mdtausifiqbal · 2023-03-08T07:35:32Z

I am facing this issue with react-app-rewired, when anything is updated in the source code then page buttons or any clickable thing becomes unresponsive, and we need to reload the page again and again.

Uncaught ReferenceError: process is not defined
at 4043 (:2:13168)
at r (:2:306599)
at 8048 (:2:9496)
at r (:2:306599)
at 8641 (:2:1379)
at r (:2:306599)
at :2:315627
at :2:324225
at :2:324229
at e.onload (index.js:1:1)

niranjan404 · 2023-03-08T07:40:54Z

I am facing this issue with react-scripts-rewired, when anything is updated in the source code then page buttons or any clickable thing becomes unresponsive, and we need to reload the page again and again.

Uncaught ReferenceError: process is not defined at 4043 (:2:13168) at r (:2:306599) at 8048 (:2:9496) at r (:2:306599) at 8641 (:2:1379) at r (:2:306599) at :2:315627 at :2:324225 at :2:324229 at e.onload (index.js:1:1)

You can use the below to package.json

//if you use npm
"devDependencies": {
"react-error-overlay": "6.0.9"
},
"overrides": {
"react-error-overlay": "6.0.9"
}

//if you use yarn
"devDependencies": {
"react-error-overlay": "6.0.9"
},
"resolutions": {
"react-error-overlay": "6.0.9"
}

and try reinstalling deps, this might be because of react-scripts >=4 have this react-error-overlay dependency which you might not be installed in your project

mdtausifiqbal · 2023-03-08T07:59:27Z

I am facing this issue with react-scripts-rewired, when anything is updated in the source code then page buttons or any clickable thing becomes unresponsive, and we need to reload the page again and again.
Uncaught ReferenceError: process is not defined at 4043 (:2:13168) at r (:2:306599) at 8048 (:2:9496) at r (:2:306599) at 8641 (:2:1379) at r (:2:306599) at :2:315627 at :2:324225 at :2:324229 at e.onload (index.js:1:1)

You can use the below to package.json

//if you use npm "devDependencies": { "react-error-overlay": "6.0.9" }, "overrides": { "react-error-overlay": "6.0.9" }

//if you use yarn "devDependencies": { "react-error-overlay": "6.0.9" }, "resolutions": { "react-error-overlay": "6.0.9" }

and try reinstalling deps, this might be because of react-scripts >=4 have this react-error-overlay dependency which you might not be installed in your project

it Solved my problem, thanks

Shivamrbic · 2023-05-23T07:25:53Z

For me guys it's working in one hit

 "overrides": {
    "react-error-overlay": "6.0.9"
  }

Please try this one

Harmed2002 · 2023-06-14T22:16:13Z

Tenía el mismo problema en React + Vite, pero esto me solucionó:

Vite usa una sintaxis diferente

import.meta.env.VITE_API_URL en lugar de process.env.

SainagChunduru · 2023-06-29T12:03:30Z

Tried all the above approaches but no luck.

Samrj12 · 2023-08-15T01:33:19Z

If it was an error with simple peers, this solved it for me: https://stackoverflow.com/questions/74421952/uncaught-referenceerror-process-not-defined-simple-peer-javascript

chrisdel101 · 2023-09-07T21:32:16Z

From stackoverflow this "works" For some reason plain process is undefined but process.NODE_ENV (etc) works. This is baffling.


# app.js
function App() {
    useEffect(() => {
      window.process = {
        ...window.process,
      };
    }, []);
   return (
   <div className="App">
      THIS IS OKAY
      {process.env.REACT_APP_API_KEY)}
      THIS IS NOT - it's undefined
      {process) 
   <Todo />
   </div>
  );
}

prasanthyejje · 2024-01-23T14:13:16Z

Tenía el mismo problema en React + Vite, pero esto me solucionó:

Vite usa una sintaxis diferente

import.meta.env.VITE_API_URL en lugar de process.env.

Hi @Harmed2002 , process.env is generating on vite build command.
it is being generated in __federation_shared_react.js file with below condition
process.env.NODE_ENV === 'production'

can you please give any more details to resolve this issue ?

EnoahNetzach added issue: bug report needs triage labels Mar 28, 2022

maxdavidson mentioned this issue May 2, 2022

Define process.platform in react-error-overlay's iframe bundle #12351

Closed

kibertoad mentioned this issue Jun 5, 2022

Fix Vite support jorgebucaran/colorette#92

Merged

abhi-dasgupta mentioned this issue Sep 27, 2022

Component import problem pmndrs/its-fine#12

Closed

MarioGiancini mentioned this issue Dec 6, 2022

Error When Viewing Deployed Studio Project sanity-io/nextjs-blog-cms-sanity-v3#123

Open

sorrycc mentioned this issue Jan 17, 2023

fix(bundler-webpack): process undefined problem with hmr umijs/umi#10315

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uncaught ReferenceError: process is not defined (NOT react-error-overlay) #12212

Uncaught ReferenceError: process is not defined (NOT react-error-overlay) #12212

EnoahNetzach commented Mar 28, 2022

masterbater commented Mar 31, 2022

EnoahNetzach commented Apr 1, 2022

ghost commented Apr 15, 2022

ghost commented Apr 15, 2022

Klingefjord commented Sep 3, 2022

masterbater commented Sep 4, 2022 via email

lovetingyuan commented Sep 11, 2022

SourceCipher commented Sep 12, 2022

enoguchi-lmi commented Sep 24, 2022 •

edited

Loading

abhi-dasgupta commented Sep 27, 2022

Veeenz commented Sep 29, 2022

masterbater commented Sep 30, 2022

arpit-ma commented Oct 3, 2022

zithokamvalethu commented Oct 4, 2022

HannanHan commented Oct 5, 2022

sourcecode71 commented Oct 5, 2022

iweurman commented Oct 18, 2022 •

edited

Loading

dbuchet commented Dec 8, 2022 •

edited

Loading

joelgrimberg commented Dec 24, 2022

Decryptus007 commented Jan 3, 2023

Ronald-patrick commented Jan 12, 2023

mdtausifiqbal commented Mar 8, 2023 •

edited

Loading

niranjan404 commented Mar 8, 2023 •

edited

Loading

mdtausifiqbal commented Mar 8, 2023

Shivamrbic commented May 23, 2023

Harmed2002 commented Jun 14, 2023

SainagChunduru commented Jun 29, 2023

Samrj12 commented Aug 15, 2023

chrisdel101 commented Sep 7, 2023

prasanthyejje commented Jan 23, 2024

Uncaught ReferenceError: process is not defined (NOT react-error-overlay) #12212

Uncaught ReferenceError: process is not defined (NOT react-error-overlay) #12212

Comments

EnoahNetzach commented Mar 28, 2022

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Reproducible demo

masterbater commented Mar 31, 2022

EnoahNetzach commented Apr 1, 2022

ghost commented Apr 15, 2022

ghost commented Apr 15, 2022

Klingefjord commented Sep 3, 2022

masterbater commented Sep 4, 2022 via email

lovetingyuan commented Sep 11, 2022

SourceCipher commented Sep 12, 2022

enoguchi-lmi commented Sep 24, 2022 • edited Loading

abhi-dasgupta commented Sep 27, 2022

Veeenz commented Sep 29, 2022

masterbater commented Sep 30, 2022

arpit-ma commented Oct 3, 2022

zithokamvalethu commented Oct 4, 2022

HannanHan commented Oct 5, 2022

sourcecode71 commented Oct 5, 2022

iweurman commented Oct 18, 2022 • edited Loading

dbuchet commented Dec 8, 2022 • edited Loading

joelgrimberg commented Dec 24, 2022

Decryptus007 commented Jan 3, 2023

Ronald-patrick commented Jan 12, 2023

mdtausifiqbal commented Mar 8, 2023 • edited Loading

niranjan404 commented Mar 8, 2023 • edited Loading

mdtausifiqbal commented Mar 8, 2023

Shivamrbic commented May 23, 2023

Harmed2002 commented Jun 14, 2023

SainagChunduru commented Jun 29, 2023

Samrj12 commented Aug 15, 2023

chrisdel101 commented Sep 7, 2023

prasanthyejje commented Jan 23, 2024

enoguchi-lmi commented Sep 24, 2022 •

edited

Loading

iweurman commented Oct 18, 2022 •

edited

Loading

dbuchet commented Dec 8, 2022 •

edited

Loading

mdtausifiqbal commented Mar 8, 2023 •

edited

Loading

niranjan404 commented Mar 8, 2023 •

edited

Loading