React Uncaught ReferenceError: process is not defined

Question

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

/** * 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; } add this to the root css file. will fix the bug temporarily until there is a proper fix . Credits : https://github.com/facebook/create-react-app/issues/11771#issuecomment-1017125835 — Sandrin Joy, Apr 19 '22 at 06:40
Could you include the contents of your `package.json` in the question? Please. — Henke, May 29 '22 at 09:06

smac89 · Answer 1 · 2022-11-02T16:26:03.647

228

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.

edited Nov 02 '22 at 16:26

answered Dec 22 '21 at 16:28

smac89

39,374
15
132
179

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 '22 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 '22 at 18:16
The method 1, fixed (patched more accurated) the issue... that's annoying... – terox Feb 17 '22 at 10:16
2

Method 1 example works only for yarn. For NPM uses: "overrides": { "react-error-overlay": "6.0.9" }, – Gustavo Garcia May 02 '22 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 06 '22 at 05:10
Installing `react-error-overlay@6.0.9` no longer freezes the screen for me, but hot reload doesn't happen at all any more. – Drazen Bjelovuk Jul 13 '22 at 00:43
Method 2, with craco 6.1.1 does not work for me. – Mathieu CAROFF Aug 03 '22 at 13:00
@MathieuCAROFF You need to upgrade your craco version. The latest version that supports the method I've shown, is [v6.3.0](https://github.com/dilanx/craco/releases/tag/v6.3.0) – smac89 Aug 03 '22 at 15:43
Method 1 worked for me. Using react-app-rewired(v2.2.1) and npm (v8.5.0) – Stuart Aug 04 '22 at 17:35
Method 2(using craco) worked for me but had to updated related packages to their latest version – rabra Feb 06 '23 at 17:20
Method 1, Using npm (>=v8.3.0) worked for me when I also installed the specific version: `npm i -D react-error-overlay@6.0.9` – Scott Norland Feb 13 '23 at 18:55

dpacman · Answer 2 · 2022-04-08T16:38:17.447

133

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

Solution: -

If you are using npm: -

npm i -D react-error-overlay@6.0.9

If you are using yarn: -

yarn add -D react-error-overlay@6.0.9

edited Apr 08 '22 at 16:38

answered Dec 27 '21 at 11:57

dpacman

3,683
2
20
35

2

See https://github.com/facebook/create-react-app/issues/11773 – Davi Lima Dec 28 '21 at 08:04
or yarn add -dev react-error-overlay@6.0.9, and copy the react-error-overlay in node_modules to node_modules/react-dev-utils/node_modules – olawalejuwonm Jan 20 '22 at 11:48
2

This worked for in `"react-scripts": "4.0.3" – Yigit Alparslan Jan 21 '22 at 01: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 01 '22 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. – Luis Antonio Canettoli Ordoñez Apr 26 '22 at 12:56

score 35 · Answer 3 · edited Nov 14 '22 at 11:12

35

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.

edited Nov 14 '22 at 11:12

www.amitpatil.me

3,001
5
43
61

answered Jan 12 '22 at 06:27

Vijay

351
2
3

score 29 · Answer 4 · edited Jan 21 '22 at 18:36

29

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

edited Jan 21 '22 at 18:36

smac89

39,374
15
132
179

answered Jan 20 '22 at 18:56

meetzoo

481
4
5

Also needed "react-scripts": "4.0.1" version in the dependencies. – neelmeg Mar 11 '22 at 13:30
1

this worked for me! however, if using yarn, you don't need the preinstall script – Alan Thomas Jun 29 '22 at 05: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 – David Torroija Jul 07 '22 at 18:27

score 17 · Answer 5 · edited Dec 16 '21 at 15:01

17

The issue was solved by updating react-scripts to 5.0.0

edited Dec 16 '21 at 15:01

Ruli

2,592
12
30
40

answered Dec 16 '21 at 11:56

Manishkumar Adesara

2,221
2
6
13

13

I upgraded my react-scripts to 5.0.0, but still facing this error, and also it freezes UI – Eklavya Chandra Dec 26 '21 at 16:58
2

it freezes the UI because you have an error. – Chen Reuven Mar 10 '22 at 05:47
3

My setup is ejected and I don't have react-scripts, what do? – riv Mar 15 '22 at 07:29

Max Vhanamane · Answer 6 · 2023-08-04T12:37:55.773

14

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

edited Aug 04 '23 at 12:37

answered Dec 05 '22 at 04:06

Max Vhanamane

163
2
7

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;``` – TrevorDeTutor Mar 14 '23 at 21:44
Thanks for sharing this solution. worked for me as i created react app using Vite. – Junaid Tariq Apr 16 '23 at 20:47

score 13 · Answer 7 · answered Mar 03 '22 at 01:29

13

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

answered Mar 03 '22 at 01:29

Nagibaba

4,218
1
35
43

In case you need this in class form, then use componentDidMount (){ window.process = { ...window.process } } – Wahinya Brian Mar 05 '22 at 01: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 '22 at 18:11
1

This causes me to have te next error: **TypeError: process.nextTick is not a function** – Vengenecx Oct 10 '22 at 08:53

WebWanderer · Answer 8 · 2022-02-11T16:44:49.897

11

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

edited Feb 11 '22 at 16:44

answered Feb 11 '22 at 16:18

WebWanderer

10,380
3
32
51

2

ONLY ONE working for me, see https://github.com/facebook/create-react-app/issues/12354 – TOPKAT May 18 '22 at 16:40
Works for me as well – rushang panchal Aug 15 '23 at 14:04

score 8 · Answer 9 · answered Mar 18 '22 at 09:13

8

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.

answered Mar 18 '22 at 09:13

Kaleb Teixeira

81
1
2

Thank you. That was the only solution that really worked. – Ricardo Ferreira Aug 01 '22 at 07: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. – HeavenlyEntity Feb 18 '23 at 00:03

OneTuskedMario · Answer 10 · 2022-06-24T13:39:54.030

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'

score 3 · Answer 11 · edited Nov 14 '22 at 11:13

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.

Patrick Métens · Answer 12 · 2022-07-02T00:02:55.717

3

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"

edited Jul 02 '22 at 00:02

answered Jul 02 '22 at 00:01

Patrick Métens

31
3

Just adding the resolutions worked for me. Thanks! – Ryan Pierce Williams Jul 19 '22 at 21:10

Ralph · Answer 13 · 2022-08-02T16:06:40.160

2

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

edited Aug 02 '22 at 16:06

answered Jul 29 '22 at 20:12

Ralph

33
4

2

Please add some description and complete code for the common users to understand the solution – Goutham J.M Aug 02 '22 at 09:44

score 1 · Answer 14 · answered Dec 23 '21 at 23:38

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

answered Dec 23 '21 at 23:38

Christopher White

11
2

score 1 · Answer 15 · answered Feb 14 '22 at 20:09

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:

Remove the package-lock.json file
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"
Update npm: npm update

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

score 1 · Answer 16 · answered Feb 17 '22 at 02:43

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

score 1 · Answer 17 · answered Feb 22 '22 at 10:38

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

answered Feb 22 '22 at 10:38

Dmitry Egorov

29
3

3

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 '22 at 07:26

score 1 · Answer 18 · answered Aug 03 '22 at 12:05

1

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

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

answered Aug 03 '22 at 12:05

Narek Grigoryan

369
3
7

score 1 · Answer 19 · answered May 18 '23 at 11:42

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 react-error-overlay@6.0.9

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

score 0 · Answer 20 · answered Jun 25 '22 at 10:24

0

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

Add to package.json:

"scripts": { "preinstall": "npx npm-force-resolutions" }
"resolutions": { "react-error-overlay": "6.0.9" }

answered Jun 25 '22 at 10:24

Asma Tanavar

51
3

score 0 · Answer 21 · answered Aug 16 '22 at 08:28

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

score 0 · Answer 22 · answered Aug 27 '22 at 10:05

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>

score 0 · Answer 23 · answered Feb 28 '23 at 04:49

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.

score 0 · Answer 24 · answered Mar 11 '23 at 08:23

0

This helped me

react-error-overlay is an overlay that displays when there is a runtime error.

    npm install --save-dev react-error-overlay@6.0.9 --force

Fix audit

    npm audit fix --force
    export NODE_OPTIONS=--openssl-legacy-provider

answered Mar 11 '23 at 08:23

Md Shayon

79
5

score 0 · Answer 25 · edited Mar 20 '23 at 15:04

0

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

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

edited Mar 20 '23 at 15:04

F. Müller

3,969
8
38
49

answered Mar 15 '23 at 03:20

Phong Le

1
1

score 0 · Answer 26 · answered Mar 24 '23 at 07:01

0

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"

answered Mar 24 '23 at 07:01

Anil

11
1

score 0 · Answer 27 · answered May 01 '23 at 18:34

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

Styn · Answer 28 · 2023-06-14T13:47:04.717

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)

score 0 · Answer 29 · answered Jun 21 '23 at 08:18

0

For webpack:

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

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

answered Jun 21 '23 at 08:18

Nikita Zhironkin

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 24 '23 at 16:56

score 0 · Answer 30 · answered Jul 22 '23 at 12:17

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

score -2 · Answer 31 · answered Jan 26 '22 at 21:32

-2

Upgrading react-scripts from v4 to "react-scripts": "^5.0.0", seem helped me

answered Jan 26 '22 at 21:32

atazmin

4,757
1
32
23