Support Nextjs 15/React 19

Open AndrewOt opened this issue 1 year ago • 0 comments

Preliminary Checks

[X] I have reviewed the documentation: https://clerk.com/docs
[X] I have searched for existing issues: https://github.com/clerk/javascript/issues
[X] I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
[X] 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/vercel/next.js/tree/canary/packages/create-next-app

Publishable key

pk_test_cHJldHR5LXdhbGxleWUtNzkuY2xlcmsuYWNjb3VudHMuZGV2JA

Description

Doesn't seem like Nextjs 15 and React 19 are supported and I couldn't find anything tracking this or mentioning future support. Just wanted to put this on the radar.

Steps to reproduce:

Create a Nextjs app with the cli too and follow the clerk upgrade guide.
Run the app

Expected behavior: The app runs without errors.

Actual behavior: It produces errors

Logs:

[Error: Route "/" used `...headers()` or similar iteration. `headers()` should be awaited before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis]
[Error: Route "/" used `...headers()` or similar iteration. `headers()` should be awaited before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis]
[Error: Route "/" used `...headers()` or similar iteration. `headers()` should be awaited before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis]
[Error: Route "/" used `...headers()` or similar iteration. `headers()` should be awaited before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis]
 ○ Compiling /sign-in/[[...sign-in]] ...
 ✓ Compiled /sign-in/[[...sign-in]] in 6.6s
Error: Route "/sign-in/[[...sign-in]]" used `...headers()` or similar iteration. `headers()` should be awaited before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at createHeadersAccessError (/home/andrewottaviano/development/mrbc-evangelism/.next/server/chunks/ssr/node_modules_next_3061d8._.js:2003:12)
    at logDedupedError (/home/andrewottaviano/development/mrbc-evangelism/.next/server/chunks/ssr/node_modules_next_3061d8._.js:1011:25)
    at syncIODev (/home/andrewottaviano/development/mrbc-evangelism/.next/server/chunks/ssr/node_modules_next_3061d8._.js:1997:5)
    at Promise.value (/home/andrewottaviano/development/mrbc-evangelism/.next/server/chunks/ssr/node_modules_next_3061d8._.js:1978:17)
    at new NextRequest (/home/andrewottaviano/development/mrbc-evangelism/.next/server/chunks/ssr/node_modules_next_3061d8._.js:3378:14)
    at buildRequestLike (/home/andrewottaviano/development/mrbc-evangelism/.next/server/chunks/ssr/node_modules_30731d._.js:48:16)
    at initialState (/home/andrewottaviano/development/mrbc-evangelism/.next/server/chunks/ssr/node_modules_30731d._.js:904:415)
    at ClerkProvider (/home/andrewottaviano/development/mrbc-evangelism/.next/server/chunks/ssr/node_modules_30731d._.js:1027:225)
Error: Route "/sign-in/[[...sign-in]]" used `headers().get('Content-Security-Policy')`. `headers()` should be awaited before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at createHeadersAccessError (/home/andrewottaviano/development/mrbc-evangelism/.next/server/chunks/ssr/node_modules_next_3061d8._.js:2003:12)
    at logDedupedError (/home/andrewottaviano/development/mrbc-evangelism/.next/server/chunks/ssr/node_modules_next_3061d8._.js:1011:25)
    at syncIODev (/home/andrewottaviano/development/mrbc-evangelism/.next/server/chunks/ssr/node_modules_next_3061d8._.js:1997:5)
    at Promise.get (/home/andrewottaviano/development/mrbc-evangelism/.next/server/chunks/ssr/node_modules_next_3061d8._.js:1922:17)
    at ClerkProvider (/home/andrewottaviano/development/mrbc-evangelism/.next/server/chunks/ssr/node_modules_30731d._.js:1028:169)

Environment

System:
    OS: Linux 6.9 Pop!_OS 22.04 LTS
    CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
    Memory: 6.19 GB / 15.54 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 22.4.1 - ~/.nvm/versions/node/v22.4.1/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v22.4.1/bin/npm
    bun: 1.1.27 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 129.1.70.126
  npmPackages:
    @clerk/nextjs: ^5.2.6 => 5.6.0
    @emotion/cache: ^11.11.0 => 11.13.1
    @emotion/react: ^11.11.4 => 11.13.0
    @emotion/styled: ^11.11.0 => 11.13.0
    @hookform/error-message: ^2.0.1 => 2.0.1
    @mui/icons-material: ^5.15.13 => 5.16.7
    @mui/material: ^5.15.12 => 5.16.7
    @mui/material-nextjs: ^5.15.11 => 5.16.6
    @mui/x-date-pickers: ^7.1.0 => 7.12.1
    @next/eslint-plugin-next: 15.0.2-canary.7 => 15.0.2-canary.7
    @types/node: 20.11.30 => 20.11.30
    @types/uuid: ^9.0.8 => 9.0.8
    @typescript-eslint/eslint-plugin: ^7.0.2 => 7.18.0
    @typescript-eslint/parser: ^7.0.2 => 7.18.0
    @vercel/postgres: ^0.9.0 => 0.9.0
    @vercel/speed-insights: ^1.0.10 => 1.0.12
    @vis.gl/react-google-maps: ^0.8.3 => 0.8.3
    dayjs: ^1.11.10 => 1.11.12
    eslint: ^8.56.0 => 8.57.0
    eslint-config-next: 15.0.2-canary.7 => 15.0.2-canary.7
    eslint-plugin-react-hooks: ^4.6.0 => 4.6.2
    eslint-plugin-react-refresh: ^0.4.5 => 0.4.9
    next: 15.0.2-canary.7 => 15.0.2-canary.7
    react: 19.0.0-rc-1631855f-20241023 => 19.0.0-rc-1631855f-20241023
    react-dom: 19.0.0-rc-1631855f-20241023 => 19.0.0-rc-1631855f-20241023
    react-hook-form: ^7.51.0 => 7.52.2
    types-react:  19.0.0-rc.1
    types-react-dom:  19.0.0-rc.1
    typescript: ^5.2.2 => 5.5.4
    uuid: ^9.0.1 => 9.0.1

Oct 26 '24 14:10 AndrewOt