fix guide
Environment variable undefined in production on Vercel
Harjot · · updated
The app works on a preview link, then a value reads as undefined on the live site. The feature that uses it breaks, or the console prints undefined where a key or URL should be.
Vercel builds each deployment with the variables that existed at that moment, and the live site uses the Production set. Check these four in order.
1. The variable isn't set for Production
Each variable has checkboxes for Production, Preview and Development. A variable set only for Preview goes to preview deployments and never reaches the live site.
Open the project in Vercel, go to Settings, then Environment Variables. Edit the variable and tick Production. Vercel's docs say a Production variable applies to the next Production Deployment.
signs The preview link shows the value, and the live domain shows undefined.
2. You added the variable after the last deploy
A deployment keeps the variables it was built with. Vercel's docs say existing deployments don't get new or changed variables.
Create a new production deployment. Push a commit to the production branch, which is usually main, or run vercel --prod from the project folder.
vercel --prodsigns The variable shows in the dashboard, and the last production deploy is older than when you added it.
3. Browser code reads a name without the public prefix
By default, variables are only available on the server. Next.js exposes a variable to browser code only when its name starts with NEXT_PUBLIC_. Vite exposes only names that start with VITE_.
Rename the variable to use the prefix, such as NEXT_PUBLIC_API_URL in Next.js or VITE_API_URL in Vite. Then update the code that reads it. Redeploy after the change.
process.env.NEXT_PUBLIC_API_URL // Next.js
import.meta.env.VITE_API_URL // Vitesigns A server route reads the value, and the browser console prints undefined for the same name.
4. The name in the code doesn't match the dashboard
Compare the name in the Vercel dashboard with the name in the code, one character at a time. A missing letter or an extra underscore makes the lookup return undefined.
Fix the name on whichever side is wrong, then redeploy.
signs The variable shows in the dashboard, and the name in your code differs by a character or two.
Test it like a new user
- Redeploy to production, then open the live site in a new private window.
- Check the feature with a non-secret value. Do not paste secret values into a chat or a ticket.
- Open the browser console and check the value appears where undefined showed before.
- Repeat the check on the preview link to confirm both environments now read the variable.
Common questions
Why does my Vercel environment variable show undefined on the live domain but work on preview?
The variable is probably set only for Preview. Each variable has checkboxes for Production, Preview and Development, and a Preview-only value never reaches the live site. Edit it in Settings, then Environment Variables, and tick Production.
Why does my Vercel production site still show the old variable value?
A deployment keeps the variables it was built with, so existing deployments don't get new or changed values. Create a new production deployment by pushing a commit to your production branch, usually main, or by running vercel --prod from the project folder.
Why does my browser code print undefined for a variable that the server can read?
The name is missing its public prefix, so browser code can't read it. Next.js exposes a variable to browser code only when its name starts with NEXT_PUBLIC_, and Vite only exposes names starting with VITE_. Rename it, update the code, then redeploy.
Still stuck?
Not sure this is the cause? Paste your app's link into the free scan. It lists what a visitor's browser can see, like leaked keys and exposed files, worst first. The score is free; every fix as a prompt for your builder is $9, one-time.
Want a person to look inside? See the diagnosis