[Bug]: Script tag not supported in react components

[steffen-gronmo]

What happened?

After upgrading to the most recent version of next (16.2.0), I am presented with the following error in the browser:

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).

Note: next-themes still seems to work as expected, I am just provided with an annoying error message now.

Version

0.4.6

What browsers are you seeing the problem on?

Microsoft Edge

[DiguinhoLNS]

I encountered the same error on Google Chrome in MacOs using:

• next-themes: 0.4.6
• next: 16.2
• react: 19.2

[pa4080]

I've tried the proposed solution and it works as it is expected! And already deployed this on prod. Here is a patch based on jakubwarkusz's PR.

1. Create the patch file patches/next-themes@0.4.6.patch:

diff --git a/dist/index.js b/dist/index.js
index 7de36edd1ab173cb0410492a9c3ff211314147e5..c9df35e949032e0d6775fad2b42c3891108d3ae9 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -1 +1 @@
-"use client";var N=Object.create;var R=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var $=(e,s)=>{for(var n in s)R(e,n,{get:s[n],enumerable:!0})},b=(e,s,n,l)=>{if(s&&typeof s=="object"||typeof s=="function")for(let o of _(s))!W.call(e,o)&&o!==n&&R(e,o,{get:()=>s[o],enumerable:!(l=V(s,o))||l.enumerable});return e};var j=(e,s,n)=>(n=e!=null?N(H(e)):{},b(s||!e||!e.__esModule?R(n,"default",{value:e,enumerable:!0}):n,e)),z=e=>b(R({},"__esModule",{value:!0}),e);var ee={};$(ee,{ThemeProvider:()=>F,useTheme:()=>B});module.exports=z(ee);var t=j(require("react"));var I=(e,s,n,l,o,d,u,h)=>{let m=document.documentElement,w=["light","dark"];function p(r){(Array.isArray(e)?e:[e]).forEach(y=>{let k=y==="class",S=k&&d?o.map(f=>d[f]||f):o;k?(m.classList.remove(...S),m.classList.add(d&&d[r]?d[r]:r)):m.setAttribute(y,r)}),C(r)}function C(r){h&&w.includes(r)&&(m.style.colorScheme=r)}function a(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}if(l)p(l);else try{let r=localStorage.getItem(s)||n,y=u&&r==="system"?a():r;p(y)}catch(r){}};var Q=["light","dark"],D="(prefers-color-scheme: dark)",J=typeof window=="undefined",L=t.createContext(void 0),q={setTheme:e=>{},themes:[]},B=()=>{var e;return(e=t.useContext(L))!=null?e:q},F=e=>t.useContext(L)?t.createElement(t.Fragment,null,e.children):t.createElement(X,{...e}),G=["light","dark"],X=({forcedTheme:e,disableTransitionOnChange:s=!1,enableSystem:n=!0,enableColorScheme:l=!0,storageKey:o="theme",themes:d=G,defaultTheme:u=n?"system":"light",attribute:h="data-theme",value:m,children:w,nonce:p,scriptProps:C})=>{let[a,r]=t.useState(()=>Z(o,u)),[T,y]=t.useState(()=>a==="system"?x():a),k=m?Object.values(m):d,S=t.useCallback(i=>{let c=i;if(!c)return;i==="system"&&n&&(c=x());let v=m?m[c]:c,E=s?K(p):null,P=document.documentElement,M=g=>{g==="class"?(P.classList.remove(...k),v&&P.classList.add(v)):g.startsWith("data-")&&(v?P.setAttribute(g,v):P.removeAttribute(g))};if(Array.isArray(h)?h.forEach(M):M(h),l){let g=Q.includes(u)?u:null,U=Q.includes(c)?c:g;P.style.colorScheme=U}E==null||E()},[p]),f=t.useCallback(i=>{let c=typeof i=="function"?i(a):i;r(c);try{localStorage.setItem(o,c)}catch(v){}},[a]),A=t.useCallback(i=>{let c=x(i);y(c),a==="system"&&n&&!e&&S("system")},[a,e]);t.useEffect(()=>{let i=window.matchMedia(D);return i.addListener(A),A(i),()=>i.removeListener(A)},[A]),t.useEffect(()=>{let i=c=>{c.key===o&&(c.newValue?r(c.newValue):f(u))};return window.addEventListener("storage",i),()=>window.removeEventListener("storage",i)},[f]),t.useEffect(()=>{S(e!=null?e:a)},[e,a]);let O=t.useMemo(()=>({theme:a,setTheme:f,forcedTheme:e,resolvedTheme:a==="system"?T:a,themes:n?[...d,"system"]:d,systemTheme:n?T:void 0}),[a,f,e,T,n,d]);return t.createElement(L.Provider,{value:O},t.createElement(Y,{forcedTheme:e,storageKey:o,attribute:h,enableSystem:n,enableColorScheme:l,defaultTheme:u,value:m,themes:d,nonce:p,scriptProps:C}),w)},Y=t.memo(({forcedTheme:e,storageKey:s,attribute:n,enableSystem:l,enableColorScheme:o,defaultTheme:d,value:u,themes:h,nonce:m,scriptProps:w})=>{let p=JSON.stringify([n,s,d,e,h,u,l,o]).slice(1,-1);return t.createElement("script",{...w,suppressHydrationWarning:!0,nonce:typeof window=="undefined"?m:"",dangerouslySetInnerHTML:{__html:`(${I.toString()})(${p})`}})}),Z=(e,s)=>{if(J)return;let n;try{n=localStorage.getItem(e)||void 0}catch(l){}return n||s},K=e=>{let s=document.createElement("style");return e&&s.setAttribute("nonce",e),s.appendChild(document.createTextNode("*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),document.head.appendChild(s),()=>{window.getComputedStyle(document.body),setTimeout(()=>{document.head.removeChild(s)},1)}},x=e=>(e||(e=window.matchMedia(D)),e.matches?"dark":"light");0&&(module.exports={ThemeProvider,useTheme});
+"use client";var N=Object.create;var R=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var $=(e,s)=>{for(var n in s)R(e,n,{get:s[n],enumerable:!0})},b=(e,s,n,l)=>{if(s&&typeof s=="object"||typeof s=="function")for(let o of _(s))!W.call(e,o)&&o!==n&&R(e,o,{get:()=>s[o],enumerable:!(l=V(s,o))||l.enumerable});return e};var j=(e,s,n)=>(n=e!=null?N(H(e)):{},b(s||!e||!e.__esModule?R(n,"default",{value:e,enumerable:!0}):n,e)),z=e=>b(R({},"__esModule",{value:!0}),e);var ee={};$(ee,{ThemeProvider:()=>F,useTheme:()=>B});module.exports=z(ee);var t=j(require("react"));var I=(e,s,n,l,o,d,u,h)=>{let m=document.documentElement,w=["light","dark"];function p(r){(Array.isArray(e)?e:[e]).forEach(y=>{let k=y==="class",S=k&&d?o.map(f=>d[f]||f):o;k?(m.classList.remove(...S),m.classList.add(d&&d[r]?d[r]:r)):m.setAttribute(y,r)}),C(r)}function C(r){h&&w.includes(r)&&(m.style.colorScheme=r)}function a(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}if(l)p(l);else try{let r=localStorage.getItem(s)||n,y=u&&r==="system"?a():r;p(y)}catch(r){}};var Q=["light","dark"],D="(prefers-color-scheme: dark)",J=typeof window=="undefined",L=t.createContext(void 0),q={setTheme:e=>{},themes:[]},B=()=>{var e;return(e=t.useContext(L))!=null?e:q},F=e=>t.useContext(L)?t.createElement(t.Fragment,null,e.children):t.createElement(X,{...e}),G=["light","dark"],X=({forcedTheme:e,disableTransitionOnChange:s=!1,enableSystem:n=!0,enableColorScheme:l=!0,storageKey:o="theme",themes:d=G,defaultTheme:u=n?"system":"light",attribute:h="data-theme",value:m,children:w,nonce:p,scriptProps:C})=>{let[a,r]=t.useState(()=>Z(o,u)),[T,y]=t.useState(()=>a==="system"?x():a),k=m?Object.values(m):d,S=t.useCallback(i=>{let c=i;if(!c)return;i==="system"&&n&&(c=x());let v=m?m[c]:c,E=s?K(p):null,P=document.documentElement,M=g=>{g==="class"?(P.classList.remove(...k),v&&P.classList.add(v)):g.startsWith("data-")&&(v?P.setAttribute(g,v):P.removeAttribute(g))};if(Array.isArray(h)?h.forEach(M):M(h),l){let g=Q.includes(u)?u:null,U=Q.includes(c)?c:g;P.style.colorScheme=U}E==null||E()},[p]),f=t.useCallback(i=>{let c=typeof i=="function"?i(a):i;r(c);try{localStorage.setItem(o,c)}catch(v){}},[a]),A=t.useCallback(i=>{let c=x(i);y(c),a==="system"&&n&&!e&&S("system")},[a,e]);t.useEffect(()=>{let i=window.matchMedia(D);return i.addListener(A),A(i),()=>i.removeListener(A)},[A]),t.useEffect(()=>{let i=c=>{c.key===o&&(c.newValue?r(c.newValue):f(u))};return window.addEventListener("storage",i),()=>window.removeEventListener("storage",i)},[f]),t.useEffect(()=>{S(e!=null?e:a)},[e,a]);let O=t.useMemo(()=>({theme:a,setTheme:f,forcedTheme:e,resolvedTheme:a==="system"?T:a,themes:n?[...d,"system"]:d,systemTheme:n?T:void 0}),[a,f,e,T,n,d]);return t.createElement(L.Provider,{value:O},t.createElement(Y,{forcedTheme:e,storageKey:o,attribute:h,enableSystem:n,enableColorScheme:l,defaultTheme:u,value:m,themes:d,nonce:p,scriptProps:C}),w)},Y=t.memo(({forcedTheme:e,storageKey:s,attribute:n,enableSystem:l,enableColorScheme:o,defaultTheme:d,value:u,themes:h,nonce:m,scriptProps:w})=>{if(typeof window!=="undefined")return null;let p=JSON.stringify([n,s,d,e,h,u,l,o]).slice(1,-1);return t.createElement("script",{...w,suppressHydrationWarning:!0,nonce:m,dangerouslySetInnerHTML:{__html:`(${I.toString()})(${p})`}})}),Z=(e,s)=>{if(J)return;let n;try{n=localStorage.getItem(e)||void 0}catch(l){}return n||s},K=e=>{let s=document.createElement("style");return e&&s.setAttribute("nonce",e),s.appendChild(document.createTextNode("*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),document.head.appendChild(s),()=>{window.getComputedStyle(document.body),setTimeout(()=>{document.head.removeChild(s)},1)}},x=e=>(e||(e=window.matchMedia(D)),e.matches?"dark":"light");0&&(module.exports={ThemeProvider,useTheme});
diff --git a/dist/index.mjs b/dist/index.mjs
index 9675b38b88b935960dbf4d2203cfaaaef13cbef4..a2b6c0806440404518529ca2a94d7961bc81a297 100644
--- a/dist/index.mjs
+++ b/dist/index.mjs
@@ -1 +1 @@
-"use client";import*as t from"react";var M=(e,i,s,u,m,a,l,h)=>{let d=document.documentElement,w=["light","dark"];function p(n){(Array.isArray(e)?e:[e]).forEach(y=>{let k=y==="class",S=k&&a?m.map(f=>a[f]||f):m;k?(d.classList.remove(...S),d.classList.add(a&&a[n]?a[n]:n)):d.setAttribute(y,n)}),R(n)}function R(n){h&&w.includes(n)&&(d.style.colorScheme=n)}function c(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}if(u)p(u);else try{let n=localStorage.getItem(i)||s,y=l&&n==="system"?c():n;p(y)}catch(n){}};var b=["light","dark"],I="(prefers-color-scheme: dark)",O=typeof window=="undefined",x=t.createContext(void 0),U={setTheme:e=>{},themes:[]},z=()=>{var e;return(e=t.useContext(x))!=null?e:U},J=e=>t.useContext(x)?t.createElement(t.Fragment,null,e.children):t.createElement(V,{...e}),N=["light","dark"],V=({forcedTheme:e,disableTransitionOnChange:i=!1,enableSystem:s=!0,enableColorScheme:u=!0,storageKey:m="theme",themes:a=N,defaultTheme:l=s?"system":"light",attribute:h="data-theme",value:d,children:w,nonce:p,scriptProps:R})=>{let[c,n]=t.useState(()=>H(m,l)),[T,y]=t.useState(()=>c==="system"?E():c),k=d?Object.values(d):a,S=t.useCallback(o=>{let r=o;if(!r)return;o==="system"&&s&&(r=E());let v=d?d[r]:r,C=i?W(p):null,P=document.documentElement,L=g=>{g==="class"?(P.classList.remove(...k),v&&P.classList.add(v)):g.startsWith("data-")&&(v?P.setAttribute(g,v):P.removeAttribute(g))};if(Array.isArray(h)?h.forEach(L):L(h),u){let g=b.includes(l)?l:null,D=b.includes(r)?r:g;P.style.colorScheme=D}C==null||C()},[p]),f=t.useCallback(o=>{let r=typeof o=="function"?o(c):o;n(r);try{localStorage.setItem(m,r)}catch(v){}},[c]),A=t.useCallback(o=>{let r=E(o);y(r),c==="system"&&s&&!e&&S("system")},[c,e]);t.useEffect(()=>{let o=window.matchMedia(I);return o.addListener(A),A(o),()=>o.removeListener(A)},[A]),t.useEffect(()=>{let o=r=>{r.key===m&&(r.newValue?n(r.newValue):f(l))};return window.addEventListener("storage",o),()=>window.removeEventListener("storage",o)},[f]),t.useEffect(()=>{S(e!=null?e:c)},[e,c]);let Q=t.useMemo(()=>({theme:c,setTheme:f,forcedTheme:e,resolvedTheme:c==="system"?T:c,themes:s?[...a,"system"]:a,systemTheme:s?T:void 0}),[c,f,e,T,s,a]);return t.createElement(x.Provider,{value:Q},t.createElement(_,{forcedTheme:e,storageKey:m,attribute:h,enableSystem:s,enableColorScheme:u,defaultTheme:l,value:d,themes:a,nonce:p,scriptProps:R}),w)},_=t.memo(({forcedTheme:e,storageKey:i,attribute:s,enableSystem:u,enableColorScheme:m,defaultTheme:a,value:l,themes:h,nonce:d,scriptProps:w})=>{let p=JSON.stringify([s,i,a,e,h,l,u,m]).slice(1,-1);return t.createElement("script",{...w,suppressHydrationWarning:!0,nonce:typeof window=="undefined"?d:"",dangerouslySetInnerHTML:{__html:`(${M.toString()})(${p})`}})}),H=(e,i)=>{if(O)return;let s;try{s=localStorage.getItem(e)||void 0}catch(u){}return s||i},W=e=>{let i=document.createElement("style");return e&&i.setAttribute("nonce",e),i.appendChild(document.createTextNode("*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),document.head.appendChild(i),()=>{window.getComputedStyle(document.body),setTimeout(()=>{document.head.removeChild(i)},1)}},E=e=>(e||(e=window.matchMedia(I)),e.matches?"dark":"light");export{J as ThemeProvider,z as useTheme};
+"use client";import*as t from"react";var M=(e,i,s,u,m,a,l,h)=>{let d=document.documentElement,w=["light","dark"];function p(n){(Array.isArray(e)?e:[e]).forEach(y=>{let k=y==="class",S=k&&a?m.map(f=>a[f]||f):m;k?(d.classList.remove(...S),d.classList.add(a&&a[n]?a[n]:n)):d.setAttribute(y,n)}),R(n)}function R(n){h&&w.includes(n)&&(d.style.colorScheme=n)}function c(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}if(u)p(u);else try{let n=localStorage.getItem(i)||s,y=l&&n==="system"?c():n;p(y)}catch(n){}};var b=["light","dark"],I="(prefers-color-scheme: dark)",O=typeof window=="undefined",x=t.createContext(void 0),U={setTheme:e=>{},themes:[]},z=()=>{var e;return(e=t.useContext(x))!=null?e:U},J=e=>t.useContext(x)?t.createElement(t.Fragment,null,e.children):t.createElement(V,{...e}),N=["light","dark"],V=({forcedTheme:e,disableTransitionOnChange:i=!1,enableSystem:s=!0,enableColorScheme:u=!0,storageKey:m="theme",themes:a=N,defaultTheme:l=s?"system":"light",attribute:h="data-theme",value:d,children:w,nonce:p,scriptProps:R})=>{let[c,n]=t.useState(()=>H(m,l)),[T,y]=t.useState(()=>c==="system"?E():c),k=d?Object.values(d):a,S=t.useCallback(o=>{let r=o;if(!r)return;o==="system"&&s&&(r=E());let v=d?d[r]:r,C=i?W(p):null,P=document.documentElement,L=g=>{g==="class"?(P.classList.remove(...k),v&&P.classList.add(v)):g.startsWith("data-")&&(v?P.setAttribute(g,v):P.removeAttribute(g))};if(Array.isArray(h)?h.forEach(L):L(h),u){let g=b.includes(l)?l:null,D=b.includes(r)?r:g;P.style.colorScheme=D}C==null||C()},[p]),f=t.useCallback(o=>{let r=typeof o=="function"?o(c):o;n(r);try{localStorage.setItem(m,r)}catch(v){}},[c]),A=t.useCallback(o=>{let r=E(o);y(r),c==="system"&&s&&!e&&S("system")},[c,e]);t.useEffect(()=>{let o=window.matchMedia(I);return o.addListener(A),A(o),()=>o.removeListener(A)},[A]),t.useEffect(()=>{let o=r=>{r.key===m&&(r.newValue?n(r.newValue):f(l))};return window.addEventListener("storage",o),()=>window.removeEventListener("storage",o)},[f]),t.useEffect(()=>{S(e!=null?e:c)},[e,c]);let Q=t.useMemo(()=>({theme:c,setTheme:f,forcedTheme:e,resolvedTheme:c==="system"?T:c,themes:s?[...a,"system"]:a,systemTheme:s?T:void 0}),[c,f,e,T,s,a]);return t.createElement(x.Provider,{value:Q},t.createElement(_,{forcedTheme:e,storageKey:m,attribute:h,enableSystem:s,enableColorScheme:u,defaultTheme:l,value:d,themes:a,nonce:p,scriptProps:R}),w)},_=t.memo(({forcedTheme:e,storageKey:i,attribute:s,enableSystem:u,enableColorScheme:m,defaultTheme:a,value:l,themes:h,nonce:d,scriptProps:w})=>{if(typeof window!=="undefined")return null;let p=JSON.stringify([s,i,a,e,h,l,u,m]).slice(1,-1);return t.createElement("script",{...w,suppressHydrationWarning:!0,nonce:d,dangerouslySetInnerHTML:{__html:`(${M.toString()})(${p})`}})}),H=(e,i)=>{if(O)return;let s;try{s=localStorage.getItem(e)||void 0}catch(u){}return s||i},W=e=>{let i=document.createElement("style");return e&&i.setAttribute("nonce",e),i.appendChild(document.createTextNode("*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),document.head.appendChild(i),()=>{window.getComputedStyle(document.body),setTimeout(()=>{document.head.removeChild(i)},1)}},E=e=>(e||(e=window.matchMedia(I)),e.matches?"dark":"light");export{J as ThemeProvider,z as useTheme};

The patch modifies both distribution files:

File	Change
dist/index.mjs	Adds if(typeof window!=="undefined")return null; at the top of ThemeScript; simplifies nonce (no longer conditionally empty)
dist/index.js	Same change in the CJS build

2. Registration in package.json. In my case the patch is registered under the pnpm.patchedDependencies field:

"pnpm": {
  "patchedDependencies": {
    "next-themes@0.4.6": "patches/next-themes@0.4.6.patch"
  }
}

• This ensures pnpm install re-applies the patch automatically on every fresh install (e.g. in CI or after node_modules is deleted).

3. Run pnpm install to apply the patch.

4. In order to remove the parch - revert the changes in package.json and do pnpm install.

[jakubwarkusz]

@pa4080 if you're looking for a drop-in replacement that fixes this and other React 19 issues without patching, I built @wrksz/themes - https://themes.wrksz.dev 👀

[omqkhafi]

@pa4080 if you're looking for a drop-in replacement that fixes this and other React 19 issues without patching, I built @wrksz/themes - https://themes.wrksz.dev 👀

I'll give it a try

[jakubwarkusz]

@pa4080 if you're looking for a drop-in replacement that fixes this and other React 19 issues without patching, I built @wrksz/themes - themes.wrksz.dev 👀

I'll give it a try

awesome, let me know if you run into any issues!

[omqkhafi]

@pa4080 if you're looking for a drop-in replacement that fixes this and other React 19 issues without patching, I built @wrksz/themes - themes.wrksz.dev 👀

I'll give it a try

awesome, let me know if you run into any issues!

The migration was easy, and it solved the problem

[mengxi-ream]

@pa4080 if you're looking for a drop-in replacement that fixes this and other React 19 issues without patching, I built @wrksz/themes - themes.wrksz.dev 👀

I use fumadocs, so I can't really use other libs

[jakubwarkusz]

@pa4080 if you're looking for a drop-in replacement that fixes this and other React 19 issues without patching, I built @wrksz/themes - themes.wrksz.dev 👀

I use fumadocs, so I can't really use other libs

You can migrate I think. https://www.fumadocs.dev/docs/ui/layouts/root-provider#theme-provider

[mengxi-ream]

@pa4080 if you're looking for a drop-in replacement that fixes this and other React 19 issues without patching, I built @wrksz/themes - themes.wrksz.dev 👀

I use fumadocs, so I can't really use other libs

You can migrate I think. https://www.fumadocs.dev/docs/ui/layouts/root-provider#theme-provider

Thank you. I will take a look when I get time