Hello, i deployed react router v7 Framework mode on vercel with @vercel/react-router preset but i cannot access vercel injected envs with VITE_*, i logged console.log(process.env) in loader and there are all vercel injected envs but when i logged console.log(import.meta.env) there are only vite envs .e.g META, BASE_URL etc.
have i missed some plugin or any other preset?
You’re not missing a plugin — this is expected behavior.
In React Router v7 (Framework Mode), Vercel’s injected environment variables are only available on the server, so you can access them inside loaders/actions via process.env.
However, Vite only exposes variables that you define and that start with VITE_, so they show up in import.meta.env.
Vercel’s automatic system env vars (e.g. VERCEL_URL, VERCEL_REGION, etc.) are not injected into Vite for security reasons, so they will never appear in import.meta.env.
Why it works this way
-
process.env(server) → full access to Vercel envs -
import.meta.env(client) → only Vite vars (VITE_*) you explicitly define
How to access a Vercel env on the client
If you want a variable available in import.meta.env, you must create it manually in Vercel:
-
Go to Vercel Dashboard → Project → Environment Variables
-
Add a new variable that starts with
VITE_
2 Likes
you mean i need to manage PRODUCTION_URL for both production and preview enviroments
Yes, and it should be VITE_PRODUCTION_URL
2 Likes
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.