Reading environment variables in Vite

[ramiAbdou]

I'm updating my application to Remix 2.2.0 and in the process of migrating to Vite!

It's been smooth so far, but running into a roadblock: it looks like I can no longer access all of my environment variables server-side via process.env.*.

After reading this Vite documentation, I got the impression that we should now read environment variables using import.meta.env.* instead of process.env.*. Even when I try to access import.meta.env.*, it only works if I added the VITE_ prefix, which I thought was only needed for client-side code.

I didn't catch anything in the Vite Migration Guide regarding updating the way we read environment variables.

Anybody experiencing something similar or am I missing something?

[dimitrisnl]

Vite hides env variables from the client. Normally you wouldn't need to change process.env at all. What you might need though is to use import 'dotenv/config' at the top of the entry.server.ts or any file that uses process.env.

dotenv package

[krall12]

This was my fix. VITE doesn't have a concept of "private" variables. They just expose all of them to the client bundle by default if it finds a variable named VITE_. Their docs even say they don't support env vars that aren't public variables (which makes no sense to me).

[KiwiKilian]

Also went with this solution. I think it should be documented as being different on the server vars from previous remix dev server.

[wobsoriano]

PR opened!

#7879

[jrestall]

@Plopix gave the following solution on Discord.

import { unstable_vitePlugin as remix } from "@remix-run/dev";
import tsconfigPaths from "vite-tsconfig-paths";
import { defineConfig, loadEnv } from 'vite';

export default ({ mode }: { mode: string }) => {
    const env = loadEnv(mode, process.cwd(), '')
    process.env = { ...process.env, ...env }
    return defineConfig({
        plugins: [
            remix(),
            tsconfigPaths(),
        ],
    });
}

[romansndlr]

Looks like this will only work during build time.

[cloud-walker]

Hi! Heavy vite user here, what I personally expect its the vite envvars logic to work: https://vitejs.dev/guide/env-and-mode.html

So the import.meta.env should pick automatically the stuff from the env files (not completely supported by the current remix), and if you really want to, you can do something like the trick proposed by @jrestall

In other words, in the migration guide I expect a chapter saying to migrate from process.env to import.meta.env (and the .env file convention of vite?)

[cloud-walker]

Maybe eliminating the VITE_ prefix? Leaving the envvars server side only?

[KiwiKilian]

I tried without the VITE_ prefix, nothing will show up. VITE_-prefixed vars are available on server AND client. So would be great to have a solution for server only and shared vars (the latter already being solved by VITE_ prefix).

[wobsoriano]

Some notes #7879 (comment)

[romansndlr]

Seems like Vite evaluates the .env files during build time only.