どういうErrorなのか？

React18以前

<script>タグをJSX内に書いてもだまって無視されていたらしいです。 (私はReact19以降しか知らないため伝聞です)

そのためshadcn/uiのNextThemeProviderコンポーネントなどもその仕様に従っています。

React19(2024年12月リリース)

しかし、React19アップデートを機にJSX内の<script>の扱いが変わりました。asyncをつければ、JSX内でも<script>を記述できるようになりました。

function MyComponent() {
  return (
    <div>
      <script async={true} src="my-script.js"></script>
      Hello World
    </div>
  );
}

同時に、asyncなしの<script>に対してはちゃんと警告が出るようになりました。 そのため、冒頭のようなエラーが出るというわけです。

問題となる点

問題は、next-themesがこのReact19の変更に対しメンテナンスがされていないことです。 実際にBugとしてIssueもありますが、PRでFixされていません。

現在のところ、next-themesは2025年5月から一度も新規リリースを行っていません。

解決策

上記Issueにもある通り、next-themesのフォークライブラリ@teispace/next-themesを導入します。

1. CLIでのライブラリの入れ替え

pnpm remove next-themes
pnpm add @teispace/next-themes
pnpm i # 必要に応じて

2. コードの修正

import { ThemeProvider as NextThemesProvider } from "@teispace/next-themes";
import { useTheme } from "@teispace/next-themes";

これだけでOKです。

注意点

@teispace/next-themesはstorageの利用がデフォルトでhybrid(localStorage + Cookie)に変わっています。

> Hybrid cookie + localStorage storage, typed themes, View Transitions, scoped sub-trees, Tailwind v4 preset, zero-FOUC SSR, codemod from `next-themes`.

※ node_modules/@teispace/next-themes/README.mdより抜粋

そのため、Cookieの使用を避ける場合、以下のように<ThemeProvider>にstorage = "local"の指定が必要です。

  <ThemeProvider attribute="class"
    ...
    storage="local"
  >

それではよきnext-themesライフを！