add a
define
object at the same level than the
plugins
array:
// 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()],
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.
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.
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()],
I write about the things I learn in the Frontend ecosystem. Most of them are about Next.js and React.
You can find some of my thought pieces on my blog: (https://meje.dev/blog)
