NextJS dynamicIO - ClerkProvider causing build failure when dynamic routes are used

[andrewkucz]

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

https://github.com/andrewkucz/clerk-dynamic-io-issue

Publishable key

pk_test_c3VwcmVtZS1kb2xwaGluLTI2LmNsZXJrLmFjY291bnRzLmRldiQ

Description

Steps to reproduce:

1. clone repro repo
2. npm install
3. npm run build

Expected behavior:

Successful build

Actual behavior:

Error: Route "/test-route/[dynamic]": A component accessed data, headers, params, searchParams, or a short-lived cache without a Suspense boundary nor a "use cache" above it. We don't have the exact line number added to error messages yet but you can see which component in the stack below. See more info: https://nextjs.org/docs/messages/next-prerender-missing-suspense
    at x (.next/server/chunks/782.js:6:53)
    at M (.next/server/chunks/782.js:6:794)
    at body (<anonymous>)
    at html (<anonymous>)
Error occurred prerendering page "/test-route/[dynamic]". Read more: https://nextjs.org/docs/messages/prerender-error
Export encountered an error on /test-route/[dynamic]/page: /test-route/[dynamic], exiting the build.

Hello,

I know dynamicIO is still in canary so I may be early and this may be low prio but couldn't find any reports of this and was frustrated so made a minimal repro to figure out the source lol. I am getting the above error when using dynamic routes with a ClerkProvider despite adding loading.tsx's everywhere and many different combinations of "use cache;", cacheLifes, and Suspense.

I was able to narrow down the issue to the combination of the use of ClerkProvider with the use of a dynamic route (in this case src/app/test-route/[dynamic]/page.tsx). Having both seems to cause the build to fail in the way above, even if auth() is not called anywhere and the middleware is not in place (the issue still occurs when both are present)

If you delete the ClerkProvider from the main layout.tsx file, the build will work, OR if you delete the src/app/test-route/[dynamic] folder so that there is no dynamic routes then the build will also pass. I also tried the dynamic prop to no avail.

Thanks!

Environment

System:
    OS: macOS 15.2
    CPU: (8) arm64 Apple M1 Pro
    Memory: 1.23 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.1 - ~/.nvm/versions/node/v20.18.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.1/bin/npm
    pnpm: 8.9.0 - /opt/homebrew/bin/pnpm
    bun: 1.1.43 - ~/.bun/bin/bun
    Watchman: 2024.03.25.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 131.0.6778.265
    Safari: 18.2
  npmPackages:
    @clerk/nextjs: ^6.9.12 => 6.9.12 
    @types/node: ^20 => 20.17.14 
    @types/react: ^19 => 19.0.7 
    @types/react-dom: ^19 => 19.0.3 
    next: ^15.2.0-canary.13 => 15.2.0-canary.13 
    react: ^19.0.0 => 19.0.0 
    react-dom: ^19.0.0 => 19.0.0 
    typescript: ^5 => 5.7.3

[panteliselef]

Hey @andrewkucz thanks for reaching out. Supporting experimental dynamicIO is on our radar. Sounds like all you have to do is for now is to wrap <ClerkProvider/> with a Suspense. In practise you should never see its fallback as long as you don't use the dynamic props like <ClerkProvider dynamic/>.

More context: <ClerkProvider/> contains calls to "async" Node APIs but in this case you are not affected. You can test this out, by creating a full static route and you will see that the it remains static after the build.

[andrewkucz]

thanks @panteliselef - this does resolve the build problem!

I thought adding a top level loading.tsx was the same as wrapping in Suspense but I guess I misunderstood some of Next's intricacies haha

Appreciate it though this will definitely unblock me for now.