clerk integration next.js
Hey all, new developer here!
I am trying to use Clerk Auth with Convex and I seem to keep getting this error:
Unhandled Runtime Error
Error: Could not find Convex client!
useMutation must be used in the React component tree under ConvexProvider. Did you forget it? See https://docs.convex.dev/quick-start#set-up-convex-in-your-react-app
I am using next.js and have created the convexclientprovider.tsx file to host both convex and clerk within a single component. However, when I wrap my app in the layout.tsx file with the component it seems to break.
Which ever component is the parent seems to work, while the child doesnt seem to get recognized.
Here is the code for the both files in the attached images.
Any obvious thing I am missing? Thank you!Welcome to Convex | Convex Developer Hub
Convex is a novel, fun, and extremely productive way to make backends for your
3 Replies
The ClerkProvider needs to wrap ConvexProviderWithClerk, not the other way around.
See step 8: https://docs.convex.dev/auth/clerk#get-started
Convex Clerk | Convex Developer Hub
Clerk is an authentication platform providing login via
Hey! Thank you for the response. I tried that as well but it will break the clerk components within the app.
If I wrapped them within a the <convexclientprovider> (the first image) would I just need to wrap the {children} on the right image with that component?
I tried that as well and it still wouldnt work :/
@mrblahblahmeow if you follow the guide I linked, it will work. If not, please share the code that doesn't work again.