Context issues in production

Help
1

I have context that I want to pass its values throughout my Next js app.
I have the context in the layout.tsx file. Within the layout.tsx file, I also have my Navbar, Header and Footer components. Now the issue is, the context values can be used in the aforementioned components, but not in the children component. In development everything works fine but in production (trying to host it on Vercel), I get issues that the context values are not accessible. It doesn’t even work with ClerkProvider as well so obviously the problem is not from my context provider. Please help me fix it.

2

Hello and welcome, @juniorfixhow! You might already have seen it, but there’s a guide written about using React Context with Next.js: 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?
3

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.

4

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?

5

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.

1 Like
6

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

7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.