NextJS (App Router) Error with > v4.26.2 #2097
Description
Preliminary Checks
-
I have reviewed the documentation: https://clerk.com/docs
-
I have searched for existing issues: https://github.com/clerk/javascript/issues
-
I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
-
This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.
Reproduction / Replay Link
https://github.com/tekmaven/next-clerk-error-minimal-repo
Publishable key
pk_test_ZXF1YWwtdnVsdHVyZS04OC5jbGVyay5hY2NvdW50cy5kZXYk
Description
Steps to reproduce:
The issue occurs using @clerk/nextjs 4.26.2 or higher. When navigating to any NextJS app router page it errors. To repro, clone the repo and run
npm installnpm run buildnpm start- Navigate to http://localhost:3000, which will result in an error:
Application error: a server-side exception has occurred (see the server logs for more information).
Expected behavior:
NextJS App Router applications work properly. The repo should display next-clerk-error-minimal-repo layout, a user button, and Home.
Actual behavior:
The following error is output to the NextJS logs:
Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
{actor: undefined, sessionClaims: ..., sessionId: ..., session: ..., userId: ..., user: ..., orgId: ..., orgRole: ..., orgSlug: ..., organization: ..., experimental__has: function}
^^^^^^^^
at /home/ryan/Projects/next-clerk-error-minimal-repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:25042
at Object.toJSON (/home/ryan/Projects/next-clerk-error-minimal-repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:25726)
at stringify (<anonymous>)
at eE (/home/ryan/Projects/next-clerk-error-minimal-repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:14115)
at eR (/home/ryan/Projects/next-clerk-error-minimal-repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:14558)
at Timeout._onTimeout (/home/ryan/Projects/next-clerk-error-minimal-repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:76:11338)
at listOnTimeout (node:internal/timers:569:17)
at process.processTimers (node:internal/timers:512:7)
If it's not clear above, the arrows are pointing to the word function in experimental__has: function.
Due to this, I believe this is a regression introduced in #1942, which lines up with v4.26.2 exhibiting this behavior.
Also note, this only happens when a next build and next start is run and does not occur with the dev server.
Environment
System:
OS: Linux 6.5 Ubuntu 23.10 23.10 (Mantic Minotaur)
CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
Memory: 44.79 GB / 62.70 GB
Container: Yes
Shell: 5.9 - /usr/bin/zsh
Binaries:
Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 10.2.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
Browsers:
Chrome: 119.0.6045.105
npmPackages:
@clerk/nextjs: ^4.27.0 => 4.27.0
@types/node: 20.9.0 => 20.9.0
@types/react: 18.2.37 => 18.2.37
@types/react-dom: 18.2.15 => 18.2.15
autoprefixer: 10.4.16 => 10.4.16
eslint: 8.53.0 => 8.53.0
eslint-config-next: 14.0.1 => 14.0.1
next: 14.0.1 => 14.0.1
postcss: 8.4.31 => 8.4.31
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
tailwindcss: 3.3.5 => 3.3.5
typescript: 5.2.2 => 5.2.2