In a scenario where you are running a vite app with reactjs template for a project and trying to fetch the environment variable from .env
file. As the popular way to fetch the environment variables from .env is to use process.env.SOMETHING
for the variable as:
SOMETHING=SECRETSAUCE
At this point the vite.config.ts
would look like:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
But fetching variable does not work right away in vite, and there are lots of way to solve the issue. I tried most of them and I felt to stick to the simple and straight forward way.
Probably with above definition and default fetching logic with process.env.*
, you would have got error Uncaught ReferenceError: global is not defined
.
I find lots of references in stackoverflow and I get confused.
The fix for error is to define global in the config as below.
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
define: {
global: {},
},
})
Now, this would probably lead to another more common error Uncaught ReferenceError: process is not defined
.
Again, there are many solutions on web and some are outdated. I find the most relevant and easy to implement is to import loadEnv
from vite library and build the custom logic as below.
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: {
global: {},
'process.env': env
},
plugins: [react()],
}
})
And the magic happens right away!!
Also to mention, we need not use the dotenv
dependency as environment variable fetching in code with process.env.*
works well without it.
Happy coding!
Top comments (0)