React 19 以降、CDN での配布は ESM 専用となり、従来のように <script> タグで読み込むことができなくなりました。事前に Babel で JSX を変換しておけば問題ありませんが、実行時でのブラウザ内変換に問題が発生します。その対処法について述べます。

React を手軽に試すため、JSX のビルド環境を構築せずに、HTML 単体での動作を想定しています。

配布方法の変更

React 18 までは <script> タグで読み込むことが可能でした。

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

React 19 では UMD ビルドが廃止され、ESM 専用となりました。

Running React 19 From a CDN and using esm.sh | Peter Kellner's Blog

UMD was widely used in the past as a convenient way to load React without a build step. Now, there are modern alternatives for loading modules as scripts in HTML documents. Starting with React 19, React will no longer produce UMD builds to reduce the complexity of its testing and release process.

（日本語訳）UMD は、ビルドステップなしで React をロードする便利な方法として、これまで広く使用されてきた。現在では、HTML ドキュメントにスクリプトとしてモジュールをロードするための、より現代的な代替手段がある。React 19 以降、React はテストおよびリリースプロセスの複雑さを軽減するため、UMD ビルドを生成しなくなる。

モジュール内で読み込みます。

import React from "https://esm.sh/react@19";
import { createRoot } from "https://esm.sh/react-dom@19/client";

JSX を使わないか、事前にビルドする場合は問題ありません。

実行時変換への対応

実行時にブラウザ内で Babel によって JSX の変換を行うと、スクリプトはモジュールではなくなるため、ESM が正常に読み込めなくなります。

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
import React from "https://esm.sh/react@19";
import { createRoot } from "https://esm.sh/react-dom@19/client";
</script>

エラー

ReferenceError: require is not defined

モジュール内で読み込んで、グローバル変数経由で JSX に渡すという変則的な方法で対応できます。

対応版

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="module">
import React from "https://esm.sh/react@19";
import { createRoot } from "https://esm.sh/react-dom@19/client";
window.React = React;
window.createRoot = createRoot;
</script>

簡単なデザインを含んだサンプルを示します。

See the Pen React Component 4 by 七誌 (@7shi) on CodePen.

CodePen 側での設定は行わず、必要なことはすべて HTML 内に書いています。

<html> や <body> で囲めば、HTML 単体で動作します。

<!DOCTYPE html>
<html>
<head><title>React Test</title></head>
<body>
<!-- ここに書く -->
</body>
</html>

互換性

React 18 以前と 19 以降では、配布方法だけでなく API も一部異なります。

記事執筆時点では React 18 以前の情報がかなり残っているため、注意が必要です。

例えば以下の記事の最後でリンクされている Pen は動作しなくなっています。（この記事はテスト用として CodePen を利用する動機が参考になります）

https://codepen.io/watanabe-tsubasa/pen/xxNKKve

修正方法 1

@18 を指定

import React from "https://esm.sh/react@18";
import ReactDOM from "https://esm.sh/react-dom@18";

修正方法 2

インポートを調整

import React from "https://esm.sh/react@19";
import * as ReactDOM from "https://esm.sh/react-dom@19/client";

参考

CodePen での React 19 の使い方は以下の Pen を参照しました。

https://codepen.io/chriscoyier/pen/RNboKBL

関連記事

この記事に掲載したサンプルの構成について解説した記事です。