[nextjs app router] ClerkProvider breaks 404 routing

[JacobJaffe]

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/JacobJaffe/clerk-nextjs-404-routing-demo/tree/main

Publishable key

pk_test_c2FmZS1zaGFkLTg2LmNsZXJrLmFjY291bnRzLmRldiQ

Description

ClerkProvider wrapping the application breaks navigating away from 404 pages with next/link. Please note that all it takes is the ClerkProvider wrapping the app - I've excluded middleware in the minimal example, that doesn't change this (upgrading to the new middleware of 5.x has no effect on this bug().

Steps to reproduce:

See detailed instructions in the provided repo.
Navigating from a 404 page with a nextjs `` component does not work when the app is wrapped in a ClerkProvider

I have pared down the example repo to the smallest reproducible case of this, but this also occurs in more complex scenarios with custom 404 pages. Interestingly, it doesn't always occur when the not-found.tsx page isn't at the root level (e.g. for a dynamic route).

Expected behavior:

Navigating should always work.

Actual behavior:

The browser url indicates the route has changed, but the page does not change.

Environment

System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 15.88 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
  Browsers:
    Safari: 17.2.1
  npmPackages:
    @clerk/nextjs: ^4.29.1 => 4.29.1
    @types/node: ^20 => 20.10.6
    @types/react: ^18 => 18.2.46
    @types/react-dom: ^18 => 18.2.18
    autoprefixer: ^10.0.1 => 10.4.16
    eslint: ^8 => 8.56.0
    eslint-config-next: 14.0.4 => 14.0.4
    eslint-config-prettier: ^9.1.0 => 9.1.0
    next: 14.0.4 => 14.0.4
    postcss: ^8 => 8.4.32
    prettier: ^3.1.1 => 3.1.1
    react: ^18 => 18.2.0
    react-dom: ^18 => 18.2.0
    tailwindcss: ^3.4.0 => 3.4.0
    typescript: ^5 => 5.3.3

[JacobJaffe]

Please note that this does not occur when running in development. You'll need to build and start the server in order to reproduce this.

[JacobJaffe]

For the visual learners out there...

[kaksv]

I also got an error deploying on vercel Nextjs 14 but everything was perfect during development.

[JacobJaffe]

@kaksv yes, this only seems to occur during while running in dev mode. Notably, this is reproducible locally though by building and serving locally.

[JacobJaffe]

There's a worse version of this bug that occurs too. It seems that only navigating to the root page breaks, so there's scenarios like:

1. Navigate to "/fake-page" -> 404 non-found.tsx renders
2. Navigate from there to "/real-page" -> /real-page/page.tsx renders
3. Navigate from there to "/" -> No navigate!

This is really bad! In practice, a 404 page being buggy is much more acceptable than a 404 page breaking a completely unrelated page

[JacobJaffe]

Any update on this?
This is really quite bad, and makes Clerk a huge risk to introduce on the App Router.

[nikosdouvlis]

Hello @JacobJaffe :)
Just wanted to let you know that we're actively working on this. I will get back to you with more details soon.

[panteliselef]

Hey @JacobJaffe turns out this issue can be replicated just by using nextjs. I have created this issue in their repo. (I used the gif from this PR, I could replace it with on of ours if it bothers you.)

For some context, we are making use of headers() inside of ClerkProvider when this is mounted as a server component which causes the issue. While not ideal you can either add "use client" on top of RootLayout or for now create a custom wrapper with "use client" and only re export ClerkProvider from there.

[panteliselef]

Update: Seems like the vercel team prioritized the issue and a PR was open to address it.

As a workaround, until the fix is out, prefetch in the <Link/> needs to explicitly be set to true or false.

[JacobJaffe]

@nikosdouvlis @panteliselef Thank you for the updates and for looking into this! Looking forward to the upstream fix, and thanks for relaying the workaround.

[panteliselef]

The fix should have landed in next@14.1.1