DEV Community

Fred B.
Fred B.

Posted on

Uncaught ReferenceError: process is not defined

How to solve the following error ?

Uncaught ReferenceError: process is not defined
Enter fullscreen mode Exit fullscreen mode

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

const someValue = process.env.SOME_KEY;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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()],
  }
Enter fullscreen mode Exit fullscreen mode

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()],
})
Enter fullscreen mode Exit fullscreen mode

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()],
  }
})
Enter fullscreen mode Exit fullscreen mode

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()],
  }
})
Enter fullscreen mode Exit fullscreen mode

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()],
  }
})
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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

Top comments (19)

Collapse
 
branwell profile image
Amanda Branwell

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

Collapse
 
soongle profile image
SOONG-E • Edited

you are a genius

Collapse
 
goldmaneitor profile image
Alvaro

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

Collapse
 
shanganegoda profile image
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

Collapse
 
timrohrer profile image
tim.rohrer

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

Collapse
 
agustingonzalezdev profile image
AgustinGonzalezDev

Graciass geniooooooooooooooooooooooooo!!!

Collapse
 
mukwaba_johnbaptistmed profile image
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()],
};
});

Collapse
 
zeeshansafdar48 profile image
Zeeshan Safdar

Thanks a lot, it worked like a charm.

Collapse
 
smartdriver321 profile image
smartdriver321

wow, you saved my time bruh

Collapse
 
helberan profile image
helberan

Thank you so much!!! ❤️

Collapse
 
uchestan profile image
UnderDog Developments

Thanks a lot

Collapse
 
pagarevijayy profile image
Vijay Pagare

worked on local but fails when deploying the project to vercel. any help?