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
fileAdd
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 theplugins
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 (19)
You, sir, are a lifesaver! (Also created an account just to say that.)
you are a genius
i'd created this account just to tell you: u r my f*cking hero
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
I suspect this is the actual solution, but I can't say as I understand why VITE deviates from the standard approach.
Graciass geniooooooooooooooooooooooooo!!!
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()],
};
});
Thanks a lot, it worked like a charm.
wow, you saved my time bruh
Thank you so much!!! ❤️
Thanks a lot
worked on local but fails when deploying the project to vercel. any help?