Vite env variables undefined in production: causes and fixes

Because Vite reads it once, during the build. The Vite docs say import.meta.env constants are “defined as global variables during dev and statically replaced at build time.” The built JavaScript holds the literal value. If the variable was missing when vite build ran, the built code has nothing to read.

That is why an app can work on your laptop and break after deploy. Your laptop has a .env.local file. The machine that builds your app usually doesn't.

// src/api.ts, what you write
const apiUrl = import.meta.env.VITE_API_URL

// dist/assets/index-*.js, what ships after the build
const apiUrl = "https://api.example.com"

Only variables that start with VITE_ reach your client code. Everything else is left out on purpose, so a database password in the same .env file never lands in the browser. This is the example from the Vite docs:

# .env
VITE_SOME_KEY=123
DB_PASSWORD=foobar

console.log(import.meta.env.VITE_SOME_KEY) // "123"
console.log(import.meta.env.DB_PASSWORD) // undefined

Moving from Create React App? REACT_APP_ names are not exposed. Rename them, or add the old prefix with the envPrefix option, which takes a string or an array:

// vite.config.ts
export default defineConfig({
  envPrefix: ["VITE_", "REACT_APP_"],
})

Never set envPrefix to an empty string. That would expose every variable in the environment, and Vite throws an error if you try.

The machine that runs vite build needs the variable. Setting it later on the server that serves the files does nothing for VITE_ values. Three details decide whether the build sees it:

• .env.local and .env.*.local are meant to stay out of git, so a CI runner or a hosting platform never sees them.
• vite build runs in production mode by default, so it loads .env, .env.local, .env.production and .env.production.local. A .env.development file is ignored.
• Variables already set in the environment win over every .env file. Setting VITE_API_URL in your host's settings works even if a committed .env has a different value.

With Docker, pass the value as a build argument. Setting it with docker run -e is too late, because the image already holds the built files.

FROM node:22 AS build
WORKDIR /app
COPY . .
ARG VITE_API_URL
ENV VITE_API_URL=$VITE_API_URL
RUN npm ci && npm run build

docker build --build-arg VITE_API_URL=https://api.example.com .

Read import.meta.env instead. process is a Node.js global, and a Vite app doesn't have it in the browser, so process.env.VITE_API_URL usually fails with ReferenceError: process is not defined. This one is common in code copied from Create React App or webpack projects, and in AI-generated code.

Because Vite reads your .env files after it has loaded the config. The Vite docs say those files are “not automatically injected into process.env while your vite.config.* is running.” Load them yourself with loadEnv:

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  // '' loads every variable, whatever its prefix
  const env = loadEnv(mode, process.cwd(), '')
  return {
    define: { __APP_ENV__: JSON.stringify(env.APP_ENV) },
  }
})

Every value in import.meta.env is a string, including 123 and true. Convert it where you read it:

const port = Number(import.meta.env.VITE_PORT)
const debug = import.meta.env.VITE_DEBUG === "true"

1. Open the project, go to Environment Variables and add the variable with its VITE_ name.
2. Leave “Runtime only” off. Runtime-only variables are kept out of the build, so a VITE_ value marked that way is always undefined in the browser.
3. Redeploy. A changed value takes effect on the next build.

Apps exported from Lovable and Bolt hit this often, because their Supabase keys sit in a .env file that isn't in the repo. See Deploy a Lovable app and Environment variables.