Hello and welcome, @juniorfixhow! You might already have seen it, but there's a guide written about using React Context with Next.js: https://vercel.com/guides/react-context-state-management-nextjs#using-react-context-for-state-management-with-next.js

There's not enough info in the original post for me to be certain of an exact solution. I have a few questions to help us narrow down the source of the issue so we can solve it together:

• Does the problem happen with Preview deployments, or only in Production? Do you see the same error if you use vercel dev (Vercel CLI) instead of npm run dev?
• You mentioned trying Clerk, so you don't think the issue is your context provider
  • Is this issue specific to auth?
  • What other provider have you tried?
• I've seen issues like this when an env var is expired or missing. Are all of the necessary environment variables included in Project Settings?

I don't know about preview deployment but whenever I try deploying I get this issue. I have tried with vercel dev and there is no issue. The issue is not about auth, it's about context in general. I tried using theme context, and I faced the same issue. The error I get is trying to tell me I'm using the context values outside the providers. I have all the environment variables stored right here on Vercel.

I wasn't able to replicate the issue myself in a test app. Can you share a minimal reproducible example so we can work from the same code to solve this?

I found out the solution. Weirdly, it turns out Vercel doesn't recognize components created outside the components folder in the project directory when it comes to context. So all those components outside the components folder were regarded as independent nodes which do not fall under my context providers. That's how come they kept telling me I'm using the context values outside the providers. Thanks for your time anyways.

I'm glad you found a solution. Thanks for coming back here to share it!