Uncaught ReferenceError: process is not defined

How to solve the following error ?

Uncaught ReferenceError: process is not defined

First, this happens when, in your Vite/React project, you add a code equivalent to the following:

const someValue = process.env.SOME_KEY;

In other words, you're simply trying to read a value from your .env file, which includes assignments similar to this:

SOME_KEY=A_VERY_IMPORTANT_VALUE_YOU_NEED

Solving this issue

1. Open the vite.config.ts file

2. Add loadEnv in your imports:
   import { defineConfig, loadEnv } from 'vite'

3. Add an env const assigment:
   const env = loadEnv(mode, process.cwd(), '');

4. add a define object at the same level than the plugins array:
   

return {
    define: {
      'process.env.SOME_KEY': JSON.stringify(env.SOME_KEY)
    },
    plugins: [react()],
  }

Complete code

Now, here's the before & after code.

The vite.config.ts file before:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

the vite.config.ts file after:

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    define: {
      'process.env.SOME_KEY': JSON.stringify(env.SOME_KEY)
    },
    plugins: [react()],
  }
})

Some final notes

So, if your like me, you'd be like: "but, wait a minute! Am I gonna have to manually write every single new key/value pair in the .env file, AND repeat myself in the vite.config.ts ?"

Well...this is exactly what this solution implies! I'm not happy about this, but at least it is a solution.

Why is is important to have this solution? Well because the CI/CD process on Netlify would fail because of the Uncaught ReferenceError: process is not defined error.

Alternative solution:

If you wish to avoid having to repeat the name of the keys in the vite.config.ts file, you could have the following:

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    define: {
      'process.env': env
    },
    plugins: [react()],
  }
})

Disclaimer

You might not wish to expose the entire contents of process.env to the front end, so manually picking the keys/names of the values you wish to get access to in the front, becomes an sort of security device...

Also, notice that in the after code suggested where you do manually pick them, you might or might not have to stringify the selected keys' values.

A better alternative solution perhaps

I guess a solution somewhere in the middle would be to have an array containaing the name of the keys you wish to cherrypick from the process.env, and then loop over it, so as to dynamically generate the object that is assigned to the define key.

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

const cherryPickedKeys = [
  "SOME_KEY_IN_YOUR_ENV_FILE",
  "SOME_OTHER_KEY_IN_YOUR_ENV_FILE",
];

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  const processEnv = {};
  cherryPickedKeys.forEach(key => processEnv[key] = env[key]);

  return {
    define: {
      'process.env': processEnv
    },
    plugins: [react()],
  }
})

Final notes for TypeScript

If your project is in Typescript, an intellisense problem will pop up, which will also have the CI/CD process fail:

Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node`.ts(2580)

And indeed, the solution to install the @types/node package, as suggested by VS Code, works and the problem goes away !

Comments

[Amanda Branwell]

You, sir, are a lifesaver! (Also created an account just to say that.)

[Alvaro]

i'd created this account just to tell you: u r my f*cking hero

[SOONG-E]

you are a genius

[shanganegoda]

Seems like "process.env" is removed, have to use "import.meta.env" instead.
So instead of process.env.VITE_SOME_KEY -> import.meta.env.VITE_SOME_KEY

Read more here - vitejs.dev/guide/env-and-mode.html

[tim.rohrer]

I suspect this is the actual solution, but I can't say as I understand why VITE deviates from the standard approach.

[AgustinGonzalezDev]

Graciass geniooooooooooooooooooooooooo!!!

[Frank Garcia]

Just do it the Vite way and forget all of this!

1. Add your .env files e.g. ".env.testing".
2. Use "VITE_" as the prefix for the variables instead of "REACT_APP_" e.g. "VITE_SOME_NAME".
3. Use "import.meta.env" instead of "process.env" e.g. "import.meta.env.VITE_SOME_NAME".

Done.

[Mukwaba John Baptist (Media-vybz)]

on my side, loadEnv was throwing an error then i revised my code s below. things worked perfectly. thanks for the clue i was totally lost

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import dotenv from 'dotenv';

dotenv.config(); // Load environment variables from .env

// vitejs.dev/config/
export default defineConfig(({ mode }) => {
return {
define: {
'process.env.REACT_APP_BASE_URL': JSON.stringify(process.env.REACT_APP_BASE_URL),
},
plugins: [react()],
};
});

[Caleb O.]

Thank you for writing this!

[Mishan Raj Shah]

Best docs i have read till date

[Zeeshan Safdar]

Thanks a lot, it worked like a charm.

[smartdriver321]

wow, you saved my time bruh