Fred B.

Posted on Aug 20, 2023

Uncaught ReferenceError: process is not defined

#vite #react #environment #variables

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

Open the vite.config.ts file
Add loadEnv in your imports:
import { defineConfig, loadEnv } from 'vite'
Add an env const assigment:
const env = loadEnv(mode, process.cwd(), '');
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 !

Top comments (22)

Amanda Branwell • Nov 2 '23

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

SOONG-E • Oct 11 '23 • Edited

you are a genius

Alvaro • Oct 30 '23

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

shanganegoda • Feb 10 '24

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 • Mar 21 '24

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

AgustinGonzalezDev • Mar 13 '24

Graciass geniooooooooooooooooooooooooo!!!

Frank Garcia • Nov 18 '24 • Edited

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

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

Done.

Mukwaba John Baptist (Media-vybz) • Jun 24 '24

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