NextJS (App Router) Error with > v4.26.2

[tekmaven]

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

1. npm install
2. npm run build
3. npm start
4. 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

[BRKalow]

Thank for the report! We've got a fix in progress that should be released shortly.

[dimkl]

Hello @tekmaven 👋
Should be fixed in @clerk/[email protected].