create-react-app: v5 Regression react-error-overlay build - Uncaught ReferenceError: process is not defined

Does ‘rm -rf node_modules’ and then npm/yarn install resolve the issue?

same here… Hot reload continues to work, but the page becomes unresponsive. Can’t click or do anything unless you do a manual refresh.

I see the same error with these dependencies.

node: 16.10.0 npm: 7.24.0 react-scripts: 5.0.0

Hot reload continues to work, but the page becomes unresponsive. Can’t click or do anything unless you do a manual refresh.

Uncaught ReferenceError: process is not defined
    4043 blank line 66162 > injectedScript:2
    r blank line 66162 > injectedScript:2
    8048 blank line 66162 > injectedScript:2
    r blank line 66162 > injectedScript:2
    8641 blank line 66162 > injectedScript:2
    r blank line 66162 > injectedScript:2
    <anonymous> blank line 66162 > injectedScript:2
    <anonymous> blank line 66162 > injectedScript:2
    <anonymous> blank line 66162 > injectedScript:2
    onload index.js:1
    be index.js:1
    he index.js:1
    tryDismissErrorOverlay webpackHotDevClient.js:184
    onHotUpdateSuccess webpackHotDevClient.js:109
    handleApplyUpdates webpackHotDevClient.js:257
    tryApplyUpdates webpackHotDevClient.js:273
    promise callback*tryApplyUpdates webpackHotDevClient.js:271
    handleSuccess webpackHotDevClient.js:106
    onmessage webpackHotDevClient.js:203
    js webpackHotDevClient.js:195
    Webpack 7

Is it fixed if updating to react-scripts v5?

I’m on CRA 4.0.3 and just as the last comment mentions in the end, adding react-error-overlay@6.0.9 to my devDependencies did not resolve the issues however adding as a resolution seems to work:

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

/**
 * until https://github.com/facebook/create-react-app/issues/11771
 * gets fixed, let's hide the problem and not address it
 */
body > iframe[style*="2147483647"]:not([id="webpack-dev-server-client-overlay"]) {
    display: none;
}

IMO while this is a total hack, it’s less fragile that modifying yarn.lock / package-lock.json

TL;DR: Make sure you have react-error-overlay@6.0.9 and not 6.0.10

Another workaround for those who don’t want to update to react-scripts@5.0.0:

• Add "react-error-overlay": "6.0.9" to your package.json
• Delete node_modules and package-lock.json (don’t skip this step)
• Reinstall dependencies

The problem was that react-scripts@4.0.3 does use react-error-overlay@6.0.9 in its package.json. However, since 6.0.10 is marked as a patch, npm does use v6.0.10 instead of v6.0.9. And Facebook, please… v6.0.10 does not compatible with v6.0.9

Another (more dirty) workaround is to modify version of react-error-overlay in package-lock.json:

    "react-error-overlay": {
      "version": "6.0.9",
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
      "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
    },

same here… Hot reload continues to work, but the page becomes unresponsive. Can’t click or do anything unless you do a manual refresh.

I also had the same issue. It adds iframe overlay that’s why I was not able to click on page. Updating to react-scripts to 5.0.0 solved my issue.

same here… Hot reload continues to work, but the page becomes unresponsive. Can’t click or do anything unless you do a manual refresh.

This also happened for me sometimes. Whenever that happens and I inspect the page or any elements, everything is in an iframe containing javascript.

Hot reload continues to work, but the page becomes unresponsive. Can’t click or do anything unless you do a manual refresh.

I had similar error after doing npx rimraf ./**/node_modules and npm install.

The dependencies:

node: 14.17.1 npm: 6.14.13 react-scripts: 4.0.3

Uncaught ReferenceError: process is not defined
    at Object.4043 (<anonymous>:2:13168)
    at r (<anonymous>:2:306599)
    at Object.8048 (<anonymous>:2:9496)
    at r (<anonymous>:2:306599)
    at Object.8641 (<anonymous>:2:1379)
    at r (<anonymous>:2:306599)
    at <anonymous>:2:315627
    at <anonymous>:2:324225
    at <anonymous>:2:324229
    at HTMLIFrameElement.e.onload 

Solved after 2 hours. a mixed solution of @edub008 and @cchampou

You have to use resolutionsand “react-error-overlay”: “6.0.9”`

remember to delete node modules and package-lock.json

😄

I’m on CRA 4.0.3 and just as the last comment mentions in the end, adding react-error-overlay@6.0.9 to my devDependencies did not resolve the issues however adding as a resolution seems to work:

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

TL;DR: Make sure you have react-error-overlay@6.0.9 and not 6.0.10

Another workaround for those who don’t want to update to react-scripts@5.0.0:

* Add `"react-error-overlay": "6.0.9"` to your `package.json`

* Delete `node_modules` and `package-lock.json` (don't skip this step)

* Reinstall dependencies

The problem was that react-scripts@4.0.3 does use react-error-overlay@6.0.9 in its package.json. However, since 6.0.10 is marked as a patch, npm does use v6.0.10 instead of v6.0.9. And Facebook, please… v6.0.10 does not compatible with v6.0.9

I’m facing the same issue. Let me know when you guys fix it please.

A temporary fix was mentioned in #406940

Adding this to devDependancies seems to resolve the issue: "react-error-overlay": "6.0.9",

in yarn.lock or package-lock.json file to find string

"react-error-overlay@npm:^6.0.9": version: 6.0.10 <-- here problem etc...

and replace to

react-error-overlay@^6.0.9: version "6.0.9" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a" integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==

saved file and run yarn install

Add the config below into the package.json. And it works. 🙏🏼

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

This is probably working for yarn.

I have to do some other operation to make it effective also for npm:

1. Install npm-force-resolutions

npm i npm-force-resolutions

This helps to use the resolutions mechanism in npm.

2. Add the force resolutions preinstall script in package.json

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

3. Now add the resolution

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

4. Delete package-lock.json

5. Delete node-modules

6. Install all packages again

npm install

I hope it helps!

CRA v5 now use the error overlay in webpack I think the process error is due to us updating the react-error-overlay package build to wp5 - so a regression we need to fix.

Cc @iansu

This is a possible solution Stackoverflow: Process not defined. You don’t have to touch any dependencies. Add this to App.js useEffect(() => { window.process = { ...window.process, }; }, []);

In case you are using classes then use: componentDidMount (){ window.process = { ...window.process } }

Having this same problem. Adding "react-error-overlay": "6.0.9" into devDependencies or overrides didn’t work, npm still decided to add version "6.0.10" into package-lock.json.

However, using yarn with "resolutions": { "react-error-overlay": "6.0.9" } fixed the problem.

I also had this problem. Upgrading react scripts to 5.0.0 solved my problem. to upgrade react script : npm install react-scripts@5.0.0 .

Upgrading to v5 should solve the issue as v5 no longer use react-error-overlay - that said we have a regression in the react-error-overlay (as the build was updated to Webpack 5) - We aim to make a patch release soon fixing this issue.

Add the config below into the package.json. And it works. 🙏🏼

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

I was using CRA + CRACO + tailwind + tailwind/typography. Here’s what I did and it solved the issue for me:

1. Upgrade react-scripts to v5
2. Upgrade tailwind to v3
3. Remove tailwind configuration from CRACO (it’s not needed anymore)
4. Change tailwind/typography from dependencies to devDependencies and upgrade it

So, does the CRA team have any plans to fix this bug in the future? Is the only way to solve it by adding it(resolutions) or upgrade v5 ?

setting it in resolutions of package.json didn’t work for me; i had to add it as an explicit devDependencies entry.

I’m on CRA 4.0.3 and just as the last comment mentions in the end, adding react-error-overlay@6.0.9 to my devDependencies did not resolve the issues however adding as a resolution seems to work:

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

Thanks a lot, this workaround is working fine.

TL;DR: Make sure you have react-error-overlay@6.0.9 and not 6.0.10

Another workaround for those who don’t want to update to react-scripts@5.0.0:

* Add `"react-error-overlay": "6.0.9"` to your `package.json`

* Delete `node_modules` and `package-lock.json` (don't skip this step)

* Reinstall dependencies

The problem was that react-scripts@4.0.3 does use react-error-overlay@6.0.9 in its package.json. However, since 6.0.10 is marked as a patch, npm does use v6.0.10 instead of v6.0.9. And Facebook, please… v6.0.10 does not compatible with v6.0.9

Another (more dirty) workaround is to modify version of react-error-overlay in package-lock.json:

    "react-error-overlay": {
      "version": "6.0.9",
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
      "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
    },

This solution worked for me. Had to force it using resolutions field though. Thank you! (I’m using Yarn workspaces)

Thanks, that does work, I realised I hadn’t manually specified the dependency in my projects requirements, but when I did manually it overridden the looser constraints on react-dev-utils.

So React scripts 4.0.3 has a dependency on "react-dev-utils": "^11.0.3", which has the dependency on "react-error-overlay": "^6.0.9", which matches 6.0.10. Maybe a React scripts 4.0.4 needs releasing with a fix for those stuck on v4?

I’m facing the same issue. Let me know when you guys fix it please.

A temporary fix was mentioned in #406940

Adding this to devDependancies seems to resolve the issue: "react-error-overlay": "6.0.9",

Still the same.

That guy found a solution, it worked for me !

https://github.com/facebook/create-react-app/issues/11880#issuecomment-1005409614

Hmm, I wonder if react-scripts or something else is creating an iframe too.

you guys using eslint?

For developers that can not fix it, there is a simple solution that can help you get rid o freezing situation

body > iframe[style*="2147483647"]:not([id="webpack-dev-server-client-overlay"]) { display: none; }

this helped me: Add this to package.json below the dependencies “resolutions”: { “react-error-overlay”: “6.0.9” }, Install react-error-overlay v6.0.9 inside your devDependencies.

@raix issue still remains. Adding react-error-overlay did not resolve.

Add the config below into the package.json. And it works. 🙏🏼

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

it’s not helping me

same here… Hot reload continues to work, but the page becomes unresponsive. Can’t click or do anything unless you do a manual refresh.

I also had the same issue. It adds iframe overlay that’s why I was not able to click on page. Updating to react-scripts to 5.0.0 solved my issue.

i did that but now its giving me new error while doing npm start TypeError: match.loader.options.plugins is not a function btw im using craco to build the app any one knows what is happening?

react-error-overlay@6.0.9 unfreezes the UI, but the hot reload no longer kicks in at all for me.

Must’ve been a cache / dependency issue for me, I used a stronger version of @mustkem 's suggestion (not sure if the ordering of these are technically correct):

yarn cache clean rm -rf node_modules/ && rm yarn.lock yarn install npx yarn-upgrade-all 👈 https://www.npmjs.com/package/yarn-upgrade-all

This worked from my end.

I confirmed that the text displayed by the react-error-overlay library on the screen is the same as the error displayed on the terminal. So I temporarily used iframe { display: none } in reset.css.

I hope the bug is fixed. 🙏

I was able to resolve this by manually adjusting my yarn.lock file (😬):

Before:

"react-error-overlay@npm:^6.0.9":
version: 6.0.10
resolution: "react-error-overlay@npm:6.0.10"
checksum: e7384f086a0162eecac8e081fe3c79b32f4ac8690c56bde35ab6b6380d10e6c8375bbb689a450902b6615261fcf6c95ea016fc0b200934667089ca83536bc4a7
languageName: node
linkType: hard

After:

"react-error-overlay@npm:^6.0.9":
version: 6.0.9
resolution: "react-error-overlay@npm:6.0.9"
checksum: 695853bc885e798008a00c10d8d94e5ac91626e8130802fea37345f9c037f41b80104345db2ee87f225feb4a4ef71b0df572b17c378a6d397b6815f6d4a84293
languageName: node
linkType: hard

Followed by yarn install to download the correct version (6.0.9).

The immediate, working fix for this is likely to adjust react-scripts’s package.json to change "react-error-overlay": "^6.0.9" to "react-error-overlay": "6.0.9".

The longer-term, working fix for this is likely to revert react-error-overlay@6.0.10 and re-publish it as 7.0.0.

TL;DR: Make sure you have react-error-overlay@6.0.9 and not 6.0.10

Another workaround for those who don’t want to update to react-scripts@5.0.0:

• Add "react-error-overlay": "6.0.9" to your package.json
• Delete node_modules and package-lock.json (don’t skip this step)
• Reinstall dependencies

The problem was that react-scripts@4.0.3 does use react-error-overlay@6.0.9 in its package.json. However, since 6.0.10 is marked as a patch, npm does use v6.0.10 instead of v6.0.9. And Facebook, please… v6.0.10 does not compatible with v6.0.9

Another (more dirty) workaround is to modify version of react-error-overlay in package-lock.json:

    "react-error-overlay": {
      "version": "6.0.9",
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
      "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
    },

Added to dependencies and it works for me.

I just upgraded react-scripts to v5.0.0. It’s resolved

For those still having issues with this: If using Webpack, run npm install -D dotenv-webpack and if using typescript npm install -D @types/dotenv-webpack.
Then in your Webpack config, add import Dotenv from "dotenv-webpack"; And

...
plugins: [
    ...
    new Dotenv(),
],
...

See https://github.com/mrsteele/dotenv-webpack/blob/master/README.md After trying everything else, this finally worked for me.

sorry but I realized that this issue is currently showed as ‘Closed’, so I am just wondering if this issue will be addressed on CRA side in the future or we’ll need to manually fix it using the workaround mentioned above?

Add the config below into the package.json. And it works. 🙏🏼

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

This is probably working for yarn.

I have to do some other operation to make it effective also for npm:

1. Install npm-force-resolutions

npm i npm-force-resolutions

This helps to use the resolutions mechanism in npm.

2. Add the force resolutions preinstall script in package.json

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

3. Now add the resolution

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

4. Delete package-lock.json

5. Delete node-modules

6. Install all packages again

npm install

I hope it helps!

I believe resolutions property only works on Yarn 1 so won’t fix users of Yarn 2 or 3.

This bug came up because react-error-overlay published a breaking change with a patch semver instead of a major version bump.

Finally I figured out the issue. For me, the reason was because there was un caught exception. If you have such issue you have to check your terminal or CMD where you run your app.

The same issue occurred after upgrading to 5 version of webpack.

I’m facing the same issue. Let me know when you guys fix it please.

Per others on this thread, I made the following update to my package.json:

"react-scripts": "5.0.0"

I then encountered a number of eslint errors. I added a missing eslint-plugin-flowtype package (that showed up in the new react-error-overlay). Based on a new error, I then needed to update eslint-plugin-react-hooks from v1 to v4 (link). Then, I learned that eslint has also updated to v8, and needed to update typescript-related linting packages as well (link).

In sum, I upgraded the following eslint-related packages.

"@typescript-eslint/eslint-plugin": "^5.7.0",
"@typescript-eslint/parser": "^5.7.0",
"eslint": "^8.4.1",
...
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-react-hooks": "^4.3.0",

I also encountered a sass-loader problem (project uses node-sass). Based on the following link, I deleted the boilerplate “font-family” line from App.scss, leftover from the original CRA project (link).

I encountered this error earlier this week. I haven’t been able to find any explicit messages or threads dealing with webpack getting a breaking update in CRA projects. Hoping this helps!

Have you found a solution to this? This only started happening to me since I deleted and reinstalled all of my dependencies this morning.

same here… Hot reload continues to work, but the page becomes unresponsive. Can’t click or do anything unless you do a manual refresh.

I also had the same issue. It adds iframe overlay that’s why I was not able to click on page. Updating to react-scripts to 5.0.0 solved my issue.

where you also using tailwind?

No i am not using tailwind.

same here… Hot reload continues to work, but the page becomes unresponsive. Can’t click or do anything unless you do a manual refresh.

I also had the same issue. It adds iframe overlay that’s why I was not able to click on page. Updating to react-scripts to 5.0.0 solved my issue.

where you also using tailwind?