zenstackhq
[BUG] `ZenStackHooksProvider` causes internal server error in Next.js v14.2.10 or newer
Description and expected behavior
In Next.js 14.2.10, as well as the latest 14.2.12, wrapping the app in ZenStackHooksProvider as exported from "../lib/hooks" causes Next.js to throw an Internal Server Error on every page.
In development, I see a 500 error in the browser console for every page, even though the page itself renders properly.
This could be due to static generation or SSR of the page failing, but not client-side rendering:
This is what’s shown on the server console in development
⨯ Internal error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
In addition, the app will refuse to build during compilation of static pages, with the following build error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
Next.js 14.2.10 is an urgent security patch, so this is critical to fix. See vulnerability here: https://github.com/vercel/next.js/security/advisories/GHSA-gp8f-8m3g-qvj9
Everything works in Next.js 14.2.8. This is the last known working version. I have not tried 14.2.9, but it’s possible a change in that version broke something.
Screenshots
Environment (please complete the following information):
- ZenStack version: 2.5.1
- Prisma version: 5.19.1
- Database type: SQLite, PostgreSQL (I have experienced this error on both setups)
- Next.js versions: 14.2.8 (works), 14.2.10 (broken), 14.2.12 (broken)
Additional context You can find a reproduction of this bug in this repo, which uses Clerk and ZenStack: https://github.com/andrictham/zenstack-next-500-error
There are 3 branches:
main: Shows this error on Next.js 14.2.10- Failed to deploy to Vercel here: https://zenstack-next-500-error-git-main-andrictham1s-projects.vercel.app/
WORKING_Next-14.2.10_No-ZenStackHooksProvider: Shows the error goes away in Next.js 14.2.10 if the hooks provider is removed from the React tree- Deployed to Vercel here: https://zenstack-next-500-error-git-workin-8f778c-andrictham1s-projects.vercel.app
WORKING_Next-14.2.8: Shows this error goes away if we downgrade to Next.js 14.2.8- Deployed to Vercel here: https://zenstack-next-500-error-rfcjlzj2r-andrictham1s-projects.vercel.app
To setup the repo locally, you’ll need add your Clerk creds to your .env.
Thank you for the detailed bug report and a repro @andrictham ! I'll look into it.
Hi @andrictham , thanks for the wait. It turns out the problem is related to the config in next.config.mjs:
serverComponentsExternalPackages: ["@zenstackhq/runtime"],
The config was needed in older ZenStack releases (when runtime wasn't compatible with Next 13+ RSC handling). It's not needed with new versions anymore. Removing it seems to fix the issue, although I don't know why ... it probably breaks one of the many black magics inside nextjs ...
@ymc9 Thanks for helping me track down the source of the issue!
I’ve verified that removing that line does indeed fix the issue and I’m now able to upgrade Next now with no problem.
Will close the issue now.