mirror of
https://github.com/vernu/textbee.git
synced 2026-07-31 17:37:26 -04:00
4ce6d00456
Three distinct issues surfaced by React 19 / Next 16:
1. next-themes script warning + hydration mismatch. ThemeProvider lived in
the nested (app) layout, so its pre-paint <script> was re-rendered during
client navigation ("Scripts inside React components are never executed
when rendering on the client") and shifted the SSR/client tree. Moved it
to the root layout via app/theme-provider.tsx, its canonical placement.
2. Invalid <p> nesting. Radix's DialogDescription and shadcn's
CardDescription render a <p>, but call sites pass block content, giving
"<p> cannot be a descendant of <p>" / "<div> cannot be a descendant of
<p>". Fixed at the primitives: both now render a <div> (DialogDescription
uses asChild so aria-describedby wiring is preserved), which fixes every
call site at once. Also dropped a redundant wrapper in generate-api-key.
3. Nested <main>: the root layout wrapped children in <main> while the (app)
layout renders its own. Removed the outer one.
Verified by driving the app with Playwright and capturing console output
across navigation and with the API key dialog open: zero hydration, script
tag, or nesting messages (previously several). Dark mode still applies.
Build, lint (0 errors), 28 unit tests, and 16 e2e green.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
16 lines
619 B
TypeScript
16 lines
619 B
TypeScript
'use client'
|
|
|
|
import { ThemeProvider as NextThemesProvider } from 'next-themes'
|
|
import type { ComponentProps } from 'react'
|
|
|
|
// next-themes injects a small inline script to set the theme before paint.
|
|
// It must live in the ROOT layout so that script is part of the initial SSR
|
|
// document and is never re-rendered during client navigation (re-rendering a
|
|
// <script> on the client triggers a React warning and a hydration mismatch).
|
|
export default function ThemeProvider({
|
|
children,
|
|
...props
|
|
}: ComponentProps<typeof NextThemesProvider>) {
|
|
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
|
|
}
|