219

I am getting issues with iframe. Till today everything was working as expected. Today I added a very simple Modal component and somehow iframe started appearing. It appears when I am editing the file and hot reload is done. Also with this issue, it's showing an error in Console as "Uncaught ReferenceError: process is not defined". Can someone please help me with this?

import React, {useEffect} from 'react';
import ReactDOM from "react-dom";
import Close from "../static/assets/close-white.svg"

const trapStyles = {
    position: 'absolute',
    opacity: 0
}
const Test = () => {

    return ReactDOM.createPortal(
        <div data-react-modal-body-trap="" tabIndex="0" style={trapStyles}/>,
        document.getElementById("app")
    )
}

const Modal = ({ open, onClose, children }) => {

    useEffect(() => {

        if (open)document.getElementById("app").classList.add("ReactModal__Body--open");

        return () => {
            document.getElementById("app").classList.remove("ReactModal__Body--open")
        }
    })
    if (!open) return null

    return ReactDOM.createPortal(
        <>
            <Test />
            <div className="ReactModal__Overlay--after-open">
                <div className="modal-form-page"
                     tabIndex="-1" role="dialog" aria-modal="true">
                    <button onClick={onClose} className="close-modal">
                        <img id="close-button" alt="close" src={Close}/>
                    </button>
                    { children }
                </div>
            </div>
        </>,
        document.getElementById("ModalPortal")
    )
};

export default Modal;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link href="%PUBLIC_URL%/favicon.ico" rel="icon"/>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="#000000" name="theme-color"/>
    <link href="%PUBLIC_URL%/logo192.png" rel="apple-touch-icon"/>
    <link href="%PUBLIC_URL%/manifest.json" rel="manifest"/>
    <title>React App</title>
</head>
<body id="app">
<noscript>You need to enable javascript to run this website</noscript>
<div id="content">
<-- All other content render here -->
</div>
<div class="ReactModalPortal" id="ModalPortal"></div>
</body>
</html>
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 (index.js:1)
4043 @ VM128:2
r @ VM128:2
8048 @ VM128:2
r @ VM128:2
8641 @ VM128:2
r @ VM128:2
(anonymous) @ VM128:2
(anonymous) @ VM128:2
(anonymous) @ VM128:2
e.onload @ index.js:1
be @ index.js:1
he @ index.js:1
tryDismissErrorOverlay @ webpackHotDevClient.js:184
onHotUpdateSuccess @ webpackHotDevClient.js:109
handleApplyUpdates @ webpackHotDevClient.js:257
(anonymous) @ webpackHotDevClient.js:273
load (async)
be @ index.js:1
he @ index.js:1
tryDismissErrorOverlay @ webpackHotDevClient.js:184
onHotUpdateSuccess @ webpackHotDevClient.js:109
handleApplyUpdates @ webpackHotDevClient.js:257
(anonymous) @ webpackHotDevClient.js:273
Promise.then (async)
tryApplyUpdates @ webpackHotDevClient.js:271
handleSuccess @ webpackHotDevClient.js:106
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:203
2

33 Answers 33

239

Upgrading to react-scripts v5 is not always the solution.

The full reason for this bug is described here. In short here is a brief summary:

The error is as a result of react-error-overlay (which many people would never have heard of because it is a dependency of react-scripts). This package's dependencies were update to support webpack v5, which unfortunately is not compatible with react-scripts v4.


Method 1 (Override a package version)

If upgrading to react-scripts v5 is not working for you, you can also try another workaround which is to pin react-error-overlay to version 6.0.9:

Delete your yarn.lock or package-lock.json, then install your dependencies again.

Using yarn

yarn will take the resolutions field into consideration out of the box.

"resolutions": {
  "//": "See https://github.com/facebook/create-react-app/issues/11773",
  "react-error-overlay": "6.0.9"
}

For yarn workspaces, place the above resolution in the root package.json, not in the problematic folder. See this issue comment.

Using npm (>=v8.3.0)

The equivalent of resolutions for npm is overrides.

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

Using npm (<8.3.0)

You need to make sure npm uses the resolutions field when you run npm install. To automate the installation, see this answer


Method 2 (Use a webpack plugin)

Yet another (not so popular) workaround is to use a webpack plugin:

plugins:[
  new webpack.DefinePlugin({
      process: {env: {}}
  })
]

If you use craco (v6.3.0+), you just need to modify your craco.config.js file to add that plugin:

{
  ...
  webpack: {
    plugins: {
      add: [
        new webpack.DefinePlugin({
          process: {env: {}}
        })
      ]
    }
  }
}

For customize-cra users, see this answer or this github comment.

This last method is not popular because not many CRA users ever have to touch webpack directly to work with react.

11
  • 2
    In the craco case, should I just use webpack.DefinePlugin with argument {process: {env: {}}} ? Or do I reference the dependency version there somehow?
    – xtra
    Jan 21, 2022 at 12:02
  • 1
    @xtra if you just want to do it through craco, then using the webpack.DefinePlugin plugin with those arguments should be enough. I've updated the answer to make it explicit that there are two methods for solving the problem
    – smac89
    Jan 21, 2022 at 18:16
  • The method 1, fixed (patched more accurated) the issue... that's annoying...
    – terox
    Feb 17, 2022 at 10:16
  • 2
    Method 1 example works only for yarn. For NPM uses: "overrides": { "react-error-overlay": "6.0.9" }, May 2, 2022 at 17:45
  • I still get the error (as per the question Title), but I am using "react-scripts": "3.4.4", and packages-lock.json show "webpack": "4.42.0"; Somehow this error has not occurred before in my React work.
    – joedotnot
    Jun 6, 2022 at 5:10
138

I tried updating react-scripts to 5.0.0, but that didn't work.

Solution: -

  • If you are using npm: -

npm i -D [email protected]

  • If you are using yarn: -

yarn add -D [email protected]

5
  • 2
  • or yarn add -dev [email protected], and copy the react-error-overlay in node_modules to node_modules/react-dev-utils/node_modules Jan 20, 2022 at 11:48
  • 2
    This worked for in `"react-scripts": "4.0.3" Jan 21, 2022 at 1:08
  • I tried this suggestion and got Line 0: Parsing error: ImportDeclaration should appear when the mode is ES6 and in the module context.
    – Henke
    Mar 1, 2022 at 17:02
  • 1
    Updating react-scripts is not always the least painful solution, some apps are still relying on webpack v4 polyfills. This is a life safer. Thanks. Apr 26, 2022 at 12:56
40

Add this code in package.json

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

After that run npm install command. It worked for me after 2 days of scrolling on the internet.

1
31

Until a fix is final(maybe this PR), for anyone using npm(not yarn) the solution is this:

add to package.json:

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

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

"devDependencies":{
    "react-error-overlay": "6.0.9",
...
}

and then do an

npm install

3
  • Also needed "react-scripts": "4.0.1" version in the dependencies.
    – neelmeg
    Mar 11, 2022 at 13:30
  • 1
    this worked for me! however, if using yarn, you don't need the preinstall script Jun 29, 2022 at 5:54
  • this worked for me as well when you have node 14 this is the solution because if you don't do this it will install "react-error-overlay": "6.0.11", by default with react-scripts 4.0.0 Jul 7, 2022 at 18:27
26

If you have created your react app using Vite then prefix your environment variables with VITE_ in .env file.

VITE_API_URL=http://localhost:5000

you can access it using:

import.meta.env.VITE_API_URL

Here is an example of how to use the environment variable in your code:

const createDeck = async (title) => {
  const response = await request.post(`${import.meta.env.VITE_API_URL}/deck`, {title});
  return response.data;
}

To know more visit - https://vitejs.dev/guide/env-and-mode.html

2
  • Superb, it's my first time using Vite and this error disturbed me. I did something like: const API_BASE_URL = import.meta.env.VITE_FIREBASE_URL;
    – TrevorNyan
    Mar 14, 2023 at 21:44
  • Thanks for sharing this solution. worked for me as i created react app using Vite. Apr 16, 2023 at 20:47
19

The issue was solved by updating react-scripts to 5.0.0

3
  • 14
    I upgraded my react-scripts to 5.0.0, but still facing this error, and also it freezes UI Dec 26, 2021 at 16:58
  • 2
    it freezes the UI because you have an error. Mar 10, 2022 at 5:47
  • 3
    My setup is ejected and I don't have react-scripts, what do?
    – riv
    Mar 15, 2022 at 7:29
16

I found the best solution.

The problem is because you lose window.process variable when React hotloads, and process exists only on node, not the browser.

So you should inject it to browser when the app loads.

Add this line to App.js

useEffect(() => {
    window.process = {
      ...window.process,
    };
  }, []);
4
  • In case you need this in class form, then use componentDidMount (){ window.process = { ...window.process } } Mar 5, 2022 at 1:35
  • 3
    For me it was redux middleware code inside the store that was looking for process, so had to add window.process = { ...window.process } inside my store.js file above the middleware code, but otherwise seems to be a good workaround without messing with deps.
    – Tom Mertz
    May 26, 2022 at 18:11
  • 1
    This causes me to have te next error: TypeError: process.nextTick is not a function
    – Vengenecx
    Oct 10, 2022 at 8:53
  • 1
    In 2023 this is the only answer that worked for me with create-react-app. Note: I tried literally all the others that don't require interaction with webpack or ejecting. This is a deal-breaking for CRA and moi
    – Mote Zart
    Sep 7, 2023 at 21:18
12

A lot of answers suggest overriding the react-error-overlay to 6.0.9, but this didn't work for me (on February 11th, 2022). I was using react-scripts 5.0.0 and react-error-overlay 6.0.10 before trying out the overlay override.

Instead of going through the hastle of defining the webpack configuration in my CRA application (as suggested by smac89), I downgraded react-scripts to 4.0.3.

It works fine with react-scripts: 4.0.3, which resolved react-error-overlay to 6.0.10.

So, my fix is:

  • Set "react-scripts": "4.0.3" in package.json
  • Delete your lock file (yarn.lock or package-lock.json) and node_modules
  • Run install
2
11

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.

2
  • Thank you. That was the only solution that really worked. Aug 1, 2022 at 7:51
  • So I had to use this after new webpack.DefinePlugin(env.stringified) in the new react-scripts version 5.0.1. Using it by itself didn't work. You will get a Conflicting values for 'process.env'. Yet the project runs. My main concern is the build output now at this point. Thank you for this. I know Next.js uses this so good suggestion. Feb 18, 2023 at 0:03
7

The only solution that worked for me was a modification of what @smac89 wrote for craco. First add process as a dependency.

yarn add process or npm i process

Then add these lines to your craco.config.js.

const webpack = require('webpack');

module.exports = {
webpack: {
     ...
     plugins: {
        add: [
            new webpack.ProvidePlugin({
                process: 'process/browser.js',
            }),
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
            }),
        ],
      },
    },
};

This, in turn, doesn't show the below warning in the console every time you start the project.

WARNING in DefinePlugin Conflicting values for 'process.env'

5

Upgrading from react-scripts 4.0.3 to 5.0.0 Did not work for me. The only thing that finally worked is the above proposed solution

using yarn

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

then yarn install

for npm i think "resolutions" has to be replaced by "overrides"

1
  • Just adding the resolutions worked for me. Thanks! Jul 19, 2022 at 21:10
3

If you are using npm > v8.3 you can use overrides like so in your package.json.

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

For more information about overrides, go here.

The issue is a breaking change in 6.0.10, some dependencies like react-dev-utils will install this version even if you pin the version of react-error-overlay to 6.0.9 that is why it is necessary to use overrides.

3

Only for Vite users:

Vite reveals the env variable on the particular type of object called import.meta.env and provides some built-in variables in some cases:

  • import.meta.env.MODE: The mode the app is running in(type string)
  • import.meta.env.BASE_URL: the base url the app is being served from(type string)
  • import.meta.env.PROD: whether the app is running in production mode(type boolean)
  • import.meta.env.DEV: whether the app is running in development mode(type boolean)
  • import.meta.env.SSR: whether the app is running in server(type boolean)

Vite uses dotenv to load additional environment variables from the following files in your environment directory: like, .env, .env.local, .env.[mode] and .env.[mode].local.

Note: An env file for a specific mode (e.g. .env.production) will take higher priority than a generic one (e.g. .env). env files are loaded at the start of Vite. Restart the server after making changes.

Only VITE_SOME_KEY will be exposed as import.meta.env.VITE_SOME_KEY to your client source code, but SOME_KEY will not. Simply use in Vite, import.meta.env.VITE_SOME_KEY to get values, Otherwise it gets undefined. Also, Vite uses dotenv-expand to expand variables out of the box.

To know more, you can check this doc - https://vitejs.dev/guide/env-and-mode.html#env-files

2

For anyone using Vite+React. Please check this page: [1]: https://vitejs.dev/guide/env-and-mode.html

The .env variable need to be named with the prefix VITE_APP_(VARIABLE NAME) Then if you are getting the error: "process is not defined", replace process with import.meta.env

Hope this helps :)

2

For people running into this issue: Apparently process?.env?.ENV_VAR and process.env.ENV_VAR are not the same.

I haven't figured out why exactly, but having the conditional accessor gives this error, even after applying the overrides/resolutions fix. But part of it is how it is transpiled to the final js, without the conditional operators the process.env part is dropped.

(I would put this as a comment, but I don't have enough reputation for that)

2

Start every property key name with: REACT_APP_

Example: REACT_APP_API_URL=http://localhost:9000/

If you are using Vite:

Go to: vite.config.js

import {
  defineConfig
} from 'vite'

Add 

define: {
    'process.env': {}
  }

in the defineConfig

Example:

export default defineConfig({
  plugins: [react()],
  define: {
    'process.env': {}
  }
})
1

Upgrading from react-scripts 4.0.3 to 5.0.0 worked for me.

I ended up with the following error (relevant if you're using craco):

TypeError: match.loader.options.plugins is not a function

This was solved by @weiwei in their answer here

1

Facing the same issue today (14th feb 22) using Docker containers for a ReactJS app and I solved it downgrading the react-scripts version to 4.0.3 and also installing react-error-overlay on version 6.0.9. So the steps were:

  1. Remove the package-lock.json file
  2. Into the package.json file
    1. Replace the dependency "react-scripts": "4.0.3"
    2. Add react-error-overlay into the dev dependencies with "react-error-overlay": "6.0.9"
  3. Update npm: npm update

I hope it helps anybody to save some time, Cheers.

1

For these who are using create-react-app with customize-cra you can use the Method 2 solution from @smac89 with addWebpackPlugin, this works for me.

react-scripts: 5.0.0 webpack: 5.64.4

// config-overrides.js
const webpack = require('webpack');
const { override, addWebpackPlugin } = require('customize-cra');

module.exports = override(
  addWebpackPlugin(
    new webpack.DefinePlugin({
      process: { env: {} },
    })
  )
);

this solution throws a warning on npm start but the application compiles right.

WARNING in DefinePlugin
Conflicting values for 'process.env'

This warning didn't brake anything but if anyone knows how to fix it please answer this thread :)

1

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

1
  • 4
    Lock files are not meant to be edited manually. Don't do that! Use resolutions to force a specific version of react-error-overlay
    – Tdy
    Apr 27, 2022 at 7:26
1

Thanks, this works for me, as Kaleb was saying

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(),
],
1
  • 3
    Please add some description and complete code for the common users to understand the solution Aug 2, 2022 at 9:44
1

i just updated version of react-script now it works fine for me

  "dependencies": {    
    "react-scripts": "5.0.0",
  },
1

The error may be misleading when using React 18.

In my case, I was getting the error process is not defined, because the variable process.env.API_URL was not defined. However, the same error was not thrown for process.env.NODE_ENV or process.env.API_HOST, because those variables were defined.

1
  • This is crazy. On it's own, any iteration of process is still undefined. But after using @Nagibaba answer, I can then only access values inside process while plain process stays undefined.
    – Mote Zart
    Sep 7, 2023 at 21:37
1

Using yarn V1.22.15 applied this solution which is working for me

Change the react-script version to 4.0.3 inside package.json.
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.

yarn add --dev [email protected]

Remove your node_modules and yarn.lock.
Yarn install and check that works.

1

For Vite Users in React

Instead of

process.env.REACT_APP_WHATEVER

use

import.meta.env.REACT_APP_WHATEVER
0

I had the same problem in reactJs and I fixed it with these steps:

Add to package.json:

  1. "scripts": { "preinstall": "npx npm-force-resolutions" }
  2. "resolutions": { "react-error-overlay": "6.0.9" }
1
  • what exactly this npm-force package does? Does it make any breaking changes to the existing dependency tree?
    – Oo-_-oO
    Nov 6, 2023 at 9:20
0

Moving to v5 of react scripts brought other issues for us, using the answer with the most votes also didn't work for us. Adding this to package.json did:

      "resolutions": {
    "react-error-overlay": "6.0.9"
  },
  "scripts": {
    "preinstall": "npx npm-force-resolutions",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
0

Note: This is a response to those who sees the process is not defined issue related to index.html, not the OP.


This might be due to that you are trying to use process.env directly in the index.html without using <% %>

Correct usage looks like this in index.html:

<% if (process.env.NODE_ENV !== 'production') { %>
  <script>
    /* Disable Google Analytics locally */
    window["ga-disable-G-something"] = true;
  </script>
<% } %>

Incorrect usage (which might be your issue):

<script>
if (process.env.NODE_ENV !== 'production') {
  /* Disable Google Analytics locally */
  window["ga-disable-G-something"] = true;
}
</script>
0

This helped me

  • react-error-overlay is an overlay that displays when there is a runtime error.
    npm install --save-dev [email protected] --force
  • Fix audit
    npm audit fix --force
    export NODE_OPTIONS=--openssl-legacy-provider
0

For answers with Webpack, ex: Rafael Stone's. Using only process work without any warning for me.

new webpack.DefinePlugin({
    process: { },
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.