ReferenceError: process is not defined (React Vite)

I just wanted to start learning how to use Supabase with React-Vite, but I encountered a small problem that made me a bit confused, I recently encountered an issue with the error message “ReferenceError: process is not defined.” Currently, I have successfully set up my project using React-Vite and Supabase and then This issue occurred when I added a .env file (dotenv) for securing my website credentials. When I installed “dotenv” and followed the documentation, I got an error. This error occurred with “process” as I wanted to read from the .env file.

Here’s what I did:

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

dotenv.config();

export default defineConfig({
  plugins: [react()],
  define: {
    "process.env.VITE_PROJECT_URL": JSON.stringify(process.env.VITE_PROJECT_URL),
    "process.env.VITE_SUPABASE_KEY": JSON.stringify(process.env.VITE_SUPABASE_KEY),
  },
});

Import dotenv from dotenv, call function dotenv.config and add define object, and then call it like picture.

VITE_PROJECT_URL=https://lnnhnawnkxlidzryreub.supabase.co
VITE_SUPABASE_KEY=supabase_key"; 

Don’t forget add VITE_ at first.

import { useEffect, useState } from "react";
import { createClient } from "@supabase/supabase-js";


const supabaseUrl = import.meta.env.VITE_PROJECT_URL;
const supabaseKey = import.meta.env.VITE_SUPABASE_KEY;
const supabase = createClient(supabaseUrl, supabaseKey); 

And call it from .env using import.env.credentials.

And ya.. I got it..

screenshot output fetching supabase data :)