Error when using NextJS 16.0.1 + Clerk Provider with cache components
Answered
tommmc. posted this in #help-forum
tommmc.OP
I just cloned the clerk/next-auth-starter-template and added cacheComponents in a next.config.ts file and hit errors during build and prerendering.
Any guidance or pointers would be appreciated.
Any guidance or pointers would be appreciated.
Answered by Morelet’s Crocodile
This pr : https://github.com/clerk/javascript/pull/7119 fixes that
6 Replies
Morelet’s Crocodile
This pr : https://github.com/clerk/javascript/pull/7119 fixes that
Answer
Morelet’s Crocodile
you'll also have to move your provider inside the html and body
<html>
<body>
<ClerkProvider>
{children}
</ClerkProvider>
</body>
</html>Once it is merged and shipped updating the package will fix it or you can use:
npm i https://pkg.pr.new/@clerk/nextjs@7119Dwarf Crocodile
@Morelet’s Crocodile I tested out the package you provided and also moved the Clerk provider further down the tree. I’m not getting any errors anymore, but I did notice that the entire page appears blank for a brief moment — it seems like everything is being suspended until the data loads, which kind of defeats the purpose of partial prerendering. When I disabled Clerk, I started seeing the helpful Next.js errors again about needing to wrap components in Suspense or use the use cache flag.
Morelet’s Crocodile
It might be beneficial to reach out to the clerk support team then if there's still something fishy going on
I was playing around with routes with params and cached components and noticed that when I use generate static params the builder throws an issue if I do not 'use cache' on the data fetcher