CODEWITHSUNDEEP
reactjs
Manishkumar Adesara
Manishkumar Adesara

Reputation: 2657

React Uncaught ReferenceError: process is not defined

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

Upvotes: 242

Views: 361084

Answers (30)

VAIBHAV NIRMAL
VAIBHAV NIRMAL

Reputation: 384

If you are using Vite, use import.meta.env instead, process.env is removed.

And make sure variables start with VITE_ in .env file.

here is example .end file:

VITE_API_BASE_URL = http://localhost:8080/api/v1

and here service will look like:

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;

Upvotes: 2

Max Vhanamane
Max Vhanamane

Reputation: 549

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

Editor: If you get the undefined, try await, eg:

const env = await import.meta.env;
export const apiKey = (env.VITE_APIKEY);

Upvotes: 46

Muhammad Saad Ali Khan
Muhammad Saad Ali Khan

Reputation: 184

I am using craco.config.js to configure webpack.

The error message "ReferenceError: process is not defined" arises when code dependent on the Node.js process global object executes in an environment where the object is absent, such as a browser.

In this scenario, it seems that the jsonwebtoken library attempts to access the process object and encounters failure due to its unavailability in your environment. To resolve this issue, consider integrating a polyfill for the process object.

I resolved this by adding these 2 lines in my craco.config.js file.

resolve: {
      alias: {
          process: "process/browser"
      },
    },

plugins: [
      new webpack.ProvidePlugin({
        process: 'process/browser',
      }),
    ],

This piece of code instructs webpack to utilize the process/browser module as a substitute for the process global object. By using the ProvidePlugin, a handy webpack plugin, it will take care of importing necessary modules whenever they are utilized in your code.

Once you have made these changes in your webpack configuration file, simply rebuild your application to resolve any errors that may have occurred.

After adding above lines. perform the following steps:

  • delete node modules from your project folder.
  • then run npm cache clean.
  • then run npm i --save-dev process.
  • then run build your project again.

Hope this solves your problem.

Upvotes: 0

lucia
lucia

Reputation: 1

I used a custom start script instead of react-script, there is my solustion:

  1. run yarn add process
  2. require("process") in srcipt/start.js

Upvotes: 0

Mostak Ahamed Nishat
Mostak Ahamed Nishat

Reputation: 77

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': {}
  }
})

Upvotes: 3

Hamza Pasking Akhtar
Hamza Pasking Akhtar

Reputation: 101

For Vite Users in React

Instead of

process.env.REACT_APP_WHATEVER

use

import.meta.env.REACT_APP_WHATEVER

Upvotes: 2

Akash Das
Akash Das

Reputation: 131

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

Upvotes: 3

Nikita Zhironkin
Nikita Zhironkin

Reputation: 11

For webpack:

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const plugins = []

if (process.env.SERVE) {
  plugins.push(new ReactRefreshWebpackPlugin())
}

Upvotes: 0

Styn
Styn

Reputation: 31

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)

Upvotes: 3

uidevthing
uidevthing

Reputation: 2111

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.

Upvotes: 1

Alen Gospodinov
Alen Gospodinov

Reputation: 31

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

Upvotes: 3

Anil
Anil

Reputation: 11

In my case the error was originating from the "path" module that was used in one of the components. I resolved this by replacing the "path" with "path-browserify"

Upvotes: 0

Phong Le
Phong Le

Reputation: 1

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

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

Upvotes: 0

Md Shayon
Md Shayon

Reputation: 375

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

Upvotes: 0

Vadim Kononov
Vadim Kononov

Reputation: 2174

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.

Upvotes: 1

jfunk
jfunk

Reputation: 8142

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.

Upvotes: 3

Vijay
Vijay

Reputation: 429

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.

Upvotes: 42

smac89
smac89

Reputation: 43108

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.

Upvotes: 247

Kenny Lindahl
Kenny Lindahl

Reputation: 161

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>

Upvotes: 0

Muhammad Mubashirullah Durrani
Muhammad Mubashirullah Durrani

Reputation: 1145

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"
  },

Upvotes: 0

Narek Grigoryan
Narek Grigoryan

Reputation: 449

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

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

Upvotes: 1

Ralph
Ralph

Reputation: 31

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(),
],

Upvotes: 1

Patrick M&#233;tens
Patrick M&#233;tens

Reputation: 51

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"

Upvotes: 5

Asma Tanavar
Asma Tanavar

Reputation: 61

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" }

Upvotes: 0

OneTuskedMario
OneTuskedMario

Reputation: 538

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'

Upvotes: 7

dpacman
dpacman

Reputation: 3899

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]

Upvotes: 139

Kaleb Teixeira
Kaleb Teixeira

Reputation: 121

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.

Upvotes: 12

Nagibaba
Nagibaba

Reputation: 5358

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,
    };
  }, []);

Upvotes: 16

Dmitry Egorov
Dmitry Egorov

Reputation: 47

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

Upvotes: 1

Rafael Stone
Rafael Stone

Reputation: 9

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

Upvotes: 0

Related Questions