Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

[Bug]: Can't deploy to vercel with nextjs 15 and react 19 #318

Closed
madebydor opened this issue Oct 28, 2024 · 4 comments
Closed

[Bug]: Can't deploy to vercel with nextjs 15 and react 19 #318

madebydor opened this issue Oct 28, 2024 · 4 comments
Labels
bug Something isn't working triage

Comments

@madebydor
Copy link

madebydor commented Oct 28, 2024 •
edited
Loading

What happened?

  1. Install a fresh Next js npx create-next-app@latest --app --tailwind --eslint --turbopack --ts
  2. Install next themes npm i next-themes
  3. Push changes to main branch
  4. Deploy in Vercel

https://github.com/madebydor/next-themes-error

This results in the following error:

[09:23:22.462] Running build in Washington, D.C., USA (East) – iad1
[09:23:22.559] Cloning github.com/madebydor/next-themes-error (Branch: main, Commit: d40217a)
[09:23:22.893] Previous build cache not available
[09:23:22.936] Cloning completed: 376.289ms
[09:23:23.171] Running "vercel build"
[09:23:23.560] Vercel CLI 37.12.0
[09:23:23.904] Installing dependencies...
[09:23:24.910] npm error code ERESOLVE
[09:23:24.910] npm error ERESOLVE could not resolve
[09:23:24.910] npm error
[09:23:24.910] npm error While resolving: next-themes@0.3.0
[09:23:24.911] npm error Found: react@19.0.0-rc-69d4b800-20241021
[09:23:24.911] npm error node_modules/react
[09:23:24.911] npm error   react@"19.0.0-rc-69d4b800-20241021" from the root project
[09:23:24.911] npm error   peer react@"^18.2.0 || 19.0.0-rc-69d4b800-20241021" from next@15.0.1
[09:23:24.911] npm error   node_modules/next
[09:23:24.911] npm error     next@"15.0.1" from the root project
[09:23:24.911] npm error   2 more (react-dom, styled-jsx)
[09:23:24.911] npm error
[09:23:24.911] npm error Could not resolve dependency:
[09:23:24.911] npm error peer react@"^16.8 || ^17 || ^18" from next-themes@0.3.0
[09:23:24.911] npm error node_modules/next-themes
[09:23:24.911] npm error   next-themes@"^0.3.0" from the root project
[09:23:24.911] npm error
[09:23:24.911] npm error Conflicting peer dependency: react@18.3.1
[09:23:24.911] npm error node_modules/react
[09:23:24.911] npm error   peer react@"^16.8 || ^17 || ^18" from next-themes@0.3.0
[09:23:24.911] npm error   node_modules/next-themes
[09:23:24.911] npm error     next-themes@"^0.3.0" from the root project
[09:23:24.911] npm error
[09:23:24.912] npm error Fix the upstream dependency conflict, or retry
[09:23:24.912] npm error this command with --force or --legacy-peer-deps
[09:23:24.912] npm error to accept an incorrect (and potentially broken) dependency resolution.
[09:23:24.912] npm error
[09:23:24.912] npm error
[09:23:24.912] npm error For a full report see:
[09:23:24.912] npm error /vercel/.npm/_logs/2024-10-28T07_23_24_005Z-eresolve-report.txt
[09:23:24.912] npm error A complete log of this run can be found in: /vercel/.npm/_logs/2024-10-28T07_23_24_005Z-debug-0.log
[09:23:24.927] Error: Command "npm install" exited with 1
[09:23:25.068]
image

Version

0.0.3

What browsers are you seeing the problem on?

No response
@madebydor madebydor added bug Something isn't working triage labels Oct 28, 2024
@gfargo
Copy link

gfargo commented Oct 28, 2024

Somewhat related to this issue filed in the Nextjs repo regarding shadcn.

A temp workaround is to provide an override within your package.json e.g.

"overrides": {
    "next-themes": {
      "next": "$next"
    },
    "react": "19.0.0-rc-1631855f-20241023",
    "react-dom": "19.0.0-rc-1631855f-20241023",
    "@types/react": "npm:types-react@19.0.0-rc.1",
    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
  }

Note: using the latest RC available in the versions list for react and react-dom

...

The next issue I ran into was a SSR hydration mismatch with the ThemeProvider e.g.

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SS-ed Client Component used

Specifically outlining the following mismatch.

> -className="light"
-style={{color-scheme: "light"}}

The fix for this was to wrap my <ThemeProvider> in a <Suspense> e.g.

<body>
  <Suspense fallback={<div>Loading...</div>}>
    <ThemeProvider
      attribute="class"
      defaultTheme="light"
      enableSystem
    >
      {children}
    </ThemeProvider>
  </Suspense>
</body>

@gfargo gfargo mentioned this issue Oct 28, 2024
Closed
@kamyarkaviani
Copy link

You can add suppressHydrationWarning to the html tag like <html lang='en' suppressHydrationWarning> ... </html> for now until this gets fixed. The Suspense solutions didn't work for me.

@madebydor
Copy link
Author

madebydor commented Oct 29, 2024 •
edited
Loading

<Suspense fallback={

Loading...
}>

That didn't solve my issue
No matter what I tried, nothing worked.
I think I might have issues with other dependencies - I'm using Shadcn, prisma, tailwind, Lucia Auth - something must be the issue. I guess I'll just downgrade for now.

@pacocoursey
Copy link
Owner

Please read the docs, everything is described here: https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app

@pacocoursey pacocoursey closed this as not planned Won't fix, can't repro, duplicate, stale Nov 4, 2024
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
bug Something isn't working triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@kamyarkaviani @gfargo @madebydor @pacocoursey