ebon shoal
Issue Summary
Error: Encountered a script tag while rendering React component.
The application throws a console error/warning when notFound() is triggered in a dynamic route (/ticket/[id]). The error points to the ThemeProvider (using next-themes) in the RootLayout. This appears to be a conflict between React 19's script tag handling and how next-themes injects its theme-initialization script, specifically during the rendering of a not-found state.
## Error Type
Console Error
## Error Message
Encountered a script tag while rendering React component. Scripts inside React components are never executed when rendering on the client. Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).
at script (<anonymous>:null:null)
at ThemeProvider (file://D:/Programming/Web/nextjs/.next/dev/static/chunks/src_components_theme-provider_tsx_0kkz68d._.js:27:216)
at RootLayout (src\app\layout.tsx:33:9)
## Code Frame
31 | >
32 | <body className="min-h-full flex flex-col">
> 33 | <ThemeProvider>{children}</ThemeProvider>
| ^
34 | </body>
35 | </html>
36 | );
Next.js version: 16.2.4 (Turbopack)
Project Environment
- Next.js Version: 16.2.4 (Turbopack enabled)
- React/React-DOM Version: 19.2.4
- next-themes Version: ^0.4.6
- Styling: Tailwind CSS v4
- Next Config: reactCompiler: true enabled.
File Structure (Relevant Parts)
src/
├── app/
│ ├── layout.tsx # Root layout with ThemeProvider
│ ├── page.tsx # Home page
│ └── ticket/
│ └── [id]/
│ ├── page.tsx # Triggers notFound()
│ └── not-found.tsx # Custom 404 UI
└── components/
└── theme-provider.tsx # Client component wrapper for next-themes
Code Implementation
- Root Layout (src/app/layout.tsx)
Wraps the application in the ThemeProvider. Note thatsuppressHydrationWarningis present on the <html> tag as required by next-themes.
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body className="min-h-full flex flex-col">
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
);
}
- Theme Provider (src/components/theme-provider.tsx)
A standard "use client" wrapper forNextThemesProvider.
"use client";
import { ThemeProvider as NextThemesProvider } from "next-themes";
export function ThemeProvider({ children }: { children: React.ReactNode }) {
return (
<NextThemesProvider
attribute="class"
defaultTheme="light"
enableSystem
disableTransitionOnChange
>
{children}
</NextThemesProvider>
);
}
- The Trigger (src/app/ticket/[id]/page.tsx)
The error occurs specifically when navigating to this page, which immediately invokes notFound().
import { notFound } from "next/navigation";
export default async function TicketPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
notFound(); // This triggers the issue
return <div>TicketPage {id}</div>;
}
lethal whale