Can't access Environment Variables in Loader via import.meta.env...

[nikolailehbrink]

Hi there,

I'm working with React Router v7 as a framework and encountering an issue accessing environment variables server-side.
I have an .env file with my OPENAI_API_KEY stored inside.

In a loader function, I want to access it via import.meta.env.OPENAI_API_KEY, but the value is always undefined.
When I use process.env.OPENAI_API_KEY instead, it works.

My expectation was that import.meta.env should work server-side, similar to how it behaves in Astro (which also uses Vite):

// When import.meta.env.SSR === true
const data = await db(import.meta.env.DB_PASSWORD);

// When import.meta.env.SSR === false
const data = fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`);

I understand that client-side environment variables must be prefixed with VITE_, but here I want to stay server-only — I just want to use import.meta.env instead of process.env.

Question

Why isn't import.meta.env available server-side in React Router v7? Is there a recommended way to configure this or is it expected to stick with process.env?

Thanks!

[lambdalisue]

Maybe VITE_ prefix?

To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code.

https://vite.dev/guide/env-and-mode#env-variables

[nikolailehbrink]

Thanks for the answer, but I already read up about this and mentioned it here aswell:

I understand that client-side environment variables must be prefixed with VITE_, but here I want to stay server-only — I just want to use import.meta.env instead of process.env.

[lambdalisue]

Oops. Sorry for that.

[nikolailehbrink]

No worries @lambdalisue! 🙂

[chopfitzroy]

Any luck finding a resolution for this?

[nikolailehbrink]

Nope, unfortunately not @chopfitzroy :/

[nikolailehbrink]

Filed an issue for this: #13526

[nikolailehbrink]

This is just a feature of Vite.

To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code.

Vite is the one providing the import.meta.env API and your route module is the "Vite-processed code" in question here. In production, import.meta.env may not be available on your chosen runtime (it's not in Node as of yet), so this may end up failing there. You should rely on the env system that will be available in your runtime, which will likely be process.env for most projects.

This is where the automatic code-splitting comes into play. You can use server-only APIs safely in your loader, as that will be removed from the client build and only used on the server environment.