I need help, I keep getting this script warning in Next.js version 16. I am trying to do light mode and dark mode using next-themes
## 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 (src/components/ThemeProvider.jsx:7:10)
at RootLayout (src\app\layout.js:23:9)
Code Frame
5 |
6 | export function ThemeProvider({ children, ...props }) {
> 7 | return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
| ^
8 | }
9 |
Next.js version: 16.2.6 (Turbopack)
Here is my global.css because I am using tailwind v4 to do the light mode and dark mode.
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap');
@import "tailwindcss";
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
Here is my layout.js
import { Nunito } from "next/font/google";
import { ThemeProvider } from "@/components/ThemeProvider";
import "./globals.css";
const nunito = Nunito({
subsets: ["latin"],
weight: ["400", "600", "700"],
});
export const metadata = {
title: "StoryMind",
description: "Stories & Summaries, powered by AI",
};
export default function RootLayout({ children }) {
return (
<html
lang="en"
suppressHydrationWarning
>
<body
className={${nunito.className} antialiased h-full min-h-full flex flex-col}>
<ThemeProvider
attribute="data-theme"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
<div id="modal-root"></div>
</ThemeProvider>
</body>
</html>
);
}
Here is my ThemeProvider
"use client";
import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
export function ThemeProvider({ children, ...props }) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}