Note
公式ドキュメントを参照したほうが早いかもしれません。 ja.react.dev
TL;DR
- umd のビルドが React 19 から削除された
- unpkg.com などでバージョン未指定で React を使っている場合、動かなくなる可能性がある
- その場合は React 18 固定するか ESM 経由でインポートすることで解決できる
UMD とは
Universal Module Definition の略で、HTMLの <script> タグに埋め込んで使える形式と思ってもらえれば良いです。
unpkg.com とは
npm リポジトリ上にあるパッケージをURLで簡単に読み込めるくんです。以下のように使われます。
<script crossorigin src="https://unpkg.com/react/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom/umd/react-.production.min.js"></script>
以下のようなケースで単一の HTMLファイル にしたいときなどに使われることがあるかもれしません。
発生状況と対策
[UMD] Remove umd builds by gnoff · Pull Request #28735 · facebook/react · GitHub にある通り、 React 19 からビルド成果物に UMD が含まれなくなりました。
unpkg.com を使用していてパッケージのバージョンを指定している場合は影響はありませんが、未指定の場合はデフォルトで最新バージョン（= v19.0.0）になるのでいきなり壊れたという状態になります。
対策としては、以下の2点がありそうです。個人的に、 unpkg.com を使っているなら取り急ぎ React 18 にして後々 ESM を検討すると良さそうです。
1. React 18 にする
<script crossorigin src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
2. ESM でインポートする
ESM では import 文に URL を指定できます。これを使用することで React 19 もインポートすることができます。
<script type="module"> import React from "https://esm.sh/react@19/?dev" import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev" ... </script>
