Vite environment variables undefined on Replit? Here is why

Your React frontend reads import.meta.env.VITE_API_URL or a public key, and it is undefined on the live site. Or the console says process is not defined. Most Replit Agent apps use Vite for the frontend, and Vite handles environment variables differently from your server. Once you know the two rules, this takes five minutes to fix.

Symptoms

• import.meta.env.MY_KEY is undefined in the browser.
• ReferenceError: process is not defined in the console.
• The value works in the preview but is empty or old in the published app.
• A third-party widget (maps, analytics, Stripe.js) fails to load for lack of a public key.

Likely causes

1. The variable does not start with VITE_, so Vite does not expose it.
2. Browser code uses process.env, which only exists on the server.
3. The value was not present when the deployment built the frontend.
4. The value changed but the app was not rebuilt and republished.
5. A secret was placed in a VITE_ variable, then removed when someone noticed, which broke the feature.

Step-by-step fix

1. Sort variables into public and secret

Public values are safe for anyone to see: a Stripe publishable key (pk_…), a public analytics ID, your API base path. Secret values are not: sk_… keys, OpenAI keys, database URLs. Only public values may go to the browser.

2. Name public ones VITE_ and read them correctly

// .env or Secrets: VITE_STRIPE_PUBLISHABLE_KEY=pk_live_...
const stripeKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY;
if (!stripeKey) console.error("VITE_STRIPE_PUBLISHABLE_KEY missing at build time");

3. Make them available at build time

Vite replaces import.meta.env.VITE_… with the actual value during vite build. Add the variable to the deployment secrets so it exists when Replit runs your build command, then publish again. In the workspace, restart the dev server after adding a variable.

4. Move secrets to the backend

If the frontend needs a secret, it needs an API route instead. The browser calls /api/…, the server uses the secret from process.env. See Replit Secrets: how to store API keys safely.

5. Remove process.env from browser code

Replace process.env.X in frontend files with import.meta.env.VITE_X, or pass the value from the server through an API call.

Copy-paste prompt for Replit Agent

Open a new Agent chat (a fresh chat keeps old attempts out of its context) and paste this:

Environment variables are undefined in the browser in my Replit app (Vite + React).
Please:
1. List every environment variable used in frontend code (import.meta.env or process.env) and classify each as public or secret.
2. For public values, rename them with the VITE_ prefix and read them with import.meta.env.
3. For secret values, move the logic to a backend /api route that reads process.env, and remove the secret from the frontend.
4. Remove any process.env usage from browser code.
5. Tell me which VITE_ variables must exist in the deployment secrets before the build.

How to verify the fix

• The live site works after republishing, with no undefined config errors in the console.
• Searching the JavaScript bundle in DevTools (Sources) finds your public key, and none of your secret keys.
• Changing a VITE_ value and republishing changes it on the live site.

For server-side variables that go missing after publishing, see Replit secrets not working in deployment.

FAQ

Why is import.meta.env undefined on my Replit app?

Vite only exposes variables prefixed with VITE_, and only those that existed when the frontend was built. Rename the variable, add it to the deployment secrets and publish again.

Can I use process.env in React with Vite?

Not in browser code. process.env exists on the server only. Use import.meta.env.VITE_ variables for public values.

Are VITE_ variables secret?

No. They are written into the JavaScript bundle that every visitor downloads. Keep secret keys on the server.