Hello Vercel Community,
I’m facing a persistent build issue with my Next.js (App Router) project where an environment variable is consistently undefined during the Vercel build process, even though it is correctly set in the project settings.
The Problem:
My application uses a public environment variable named NEXT_PUBLIC_MY_SERVICE_CLIENT_ID. The build fails every time with an error Error: clientId must be provided because process.env.NEXT_PUBLIC_MY_SERVICE_CLIENT_ID is undefined.
Here’s what I’ve confirmed:
- The application runs perfectly on my local machine, correctly loading the variable from my
.env.localfile. - The environment variable
NEXT_PUBLIC_MY_SERVICE_CLIENT_IDis correctly set in the Vercel project settings for all environments (Production, Preview, and Development). I have double-checked for any typos or extra spaces.
Key Debugging Step:
To diagnose this, I added a console.log to the top of my next.config.ts file to print the variable during the build:
console.log('Client ID:', process.env.NEXT_PUBLIC_MY_SERVICE_CLIENT_ID);
Here are the results:
- Local Machine (
npm run dev): The console correctly printsClient ID: my-client-id-value. - Vercel Build Log: The console prints
Client ID: undefined.
This definitively proves that the variable set in the Vercel UI is not being passed to the build container. I have tried multiple redeploys and new deployments via Git push with the same result.
Here is the relevant part of my build log:
My Question:
Has anyone encountered a situation like this before? Is there a known issue or an additional configuration step I might be missing that would cause a correctly set environment variable to be undefined during the build?
Any help or insight would be greatly appreciated. Thank you!
