suppress React 19 script warning by not rendering ThemeScript on client

next-themes/__tests__/index.test.tsx

@@ -488,7 +488,7 @@ describe('setTheme', () => {
 })
 
 describe('inline script', () => {
-  test('should pass props to script', () => {
+  test('should not render script tag on client (avoids React 19 warning)', () => {
     act(() => {
       render(
         <ThemeProvider defaultTheme="light" scriptProps={{ 'data-test': '1234' }}>
@@ -497,6 +497,9 @@ describe('inline script', () => {
       )
     })
 
-    expect(document.querySelector('script[data-test="1234"]')).toBeTruthy()
+    // ThemeScript returns null on the client to prevent the React 19 warning:
+    // "Scripts inside React components are never executed when rendering on the client."
+    // The script only renders during SSR where it runs once to prevent FOUC.
+    expect(document.querySelector('script[data-test="1234"]')).toBeNull()
   })
 })

next-themes/src/index.tsx

@@ -197,6 +197,13 @@ export const ThemeScript = React.memo(
     nonce,
     scriptProps
   }: Omit<ThemeProviderProps, 'children'> & { defaultTheme: string }) => {
+    // Only render during SSR. The script executes once in the browser before
+    // React hydrates, preventing flash of unstyled content (FOUC). Rendering
+    // it again on the client would trigger a React 19 warning ("Scripts inside
+    // React components are never executed when rendering on the client") and
+    // serves no purpose since the script has already run.
+    if (typeof window !== 'undefined') return null
+
     const scriptArgs = JSON.stringify([
       attribute,
       storageKey,
@@ -212,7 +219,7 @@ export const ThemeScript = React.memo(
       <script
         {...scriptProps}
         suppressHydrationWarning
-        nonce={typeof window === 'undefined' ? nonce : ''}
+        nonce={nonce}
         dangerouslySetInnerHTML={{ __html: `(${script.toString()})(${scriptArgs})` }}
       />
     )