Why My Env Variables Were Undefined in Production (Astro + Vite)

Pop Dase — Thu, 01 Oct 2026 15:34:43 +0000

Here is the error I hit on a production build:

TypeError: Cannot read properties of undefined (reading "API_URL")

The same code worked perfectly in development. The .env file was there. The variable was defined. And yet, in production, it was undefined.

This is one of the most common Vite and Astro gotchas. The error message gives you nothing to work with. Here is what is happening and how to fix it.

The Rule

Vite only exposes environment variables that are prefixed with PUBLIC_ to the client. Everything else stays on the server.

PUBLIC_API_URL=https://api.example.com
API_SECRET=abc123

If you try to reference import.meta.env.API_SECRET from a client-side component, it is undefined. Not because the variable is missing, but because Vite deliberately hides it. This is a feature, not a bug — it prevents you from shipping an API key to every visitor.

The Symptom

· Your .env defines API_KEY
· Your component calls import.meta.env.API_KEY
· In development, it works
· In production, it is undefined
· Your code throws a TypeError

Vite is permissive in dev mode. In production, the build step strips out anything not prefixed with PUBLIC_.

The Fix

Option 1: Rename the variable.

If the value is safe to expose:

PUBLIC_API_URL=https://api.example.com

Then reference it with the new name:

const apiUrl = import.meta.env.PUBLIC_API_URL

Option 2: Keep it server-side.

If the value is a secret, move it into an Astro API route at src/pages/api/something.json.ts:

export const prerender = false

export async function GET() {
const response = await fetch("https://api.example.com/data", {
headers: { Authorization: Bearer ${import.meta.env.API_SECRET} }
})
const data = await response.json()
return new Response(JSON.stringify(data))
}

Then call /api/something.json from the client. The secret stays on the server.

The Cloudflare Trap

Even after fixing the prefix, a second issue often appears. .env files should not be committed to Git. Cloudflare does not read them. Set the same variables in the Cloudflare dashboard under Settings → Environment variables, for Production and Preview. Then trigger a new deployment.

The General Rule

· PUBLIC_ prefix: lives on client and server, safe to expose
· Anything else: server only, not safe to expose

If a value is not prefixed with PUBLIC_, treat it as a secret.

Originally published on codex-blog-6v6.pages.dev.

Fixing the tsconfigPaths Error in Astro + Tailwind 4

Pop Dase — Thu, 01 Oct 2026 12:34:45 +0000

If you are building an Astro site with Tailwind 4 and your build fails with this error:

[@tailwindcss/vite:generate:build] Missing field tsconfigPaths on BindingViteResolvePluginConfig.resolveOptions

You are not alone. This is a compatibility break between Vite 8 (which ships Rolldown) and the @tailwindcss/vite plugin. Here is what is happening and how to fix it.

Read the full article on my blog →

This post was originally published on codex-blog-6v6.pages.dev. Follow along there for more notes on Astro, tooling, and deployment.

DEV Community: Pop Dase

Why My Env Variables Were Undefined in Production (Astro + Vite)

Fixing the tsconfigPaths Error in Astro + Tailwind 4