こんにちは！「GLOBIS 学び放題」のフロントエンドエンジニアをしているAgataです。
React 19が2024年に登場しましたので、2024年から2025年の年末年始あたりに開発作業が落ち着くのを待って、グロービス学び放題プロジェクトの大規模なアップグレードを計画いたしました。本記事では、React 18から19へのアップグレード手順を共有させていただきます。手順は以下の通りです。

1. Reactのガイドに従って、アップグレードを実施してみる

下記のコメントを実行し、エラーの発生箇所と、全体的な機能への悪影響の有無を確認する。

yarn add --exact react@^19.0.0 react-dom@^19.0.0
yarn add --exact @types/react@^19.0.0 @types/react-dom@^19.0.0
npx types-react-codemod@latest preset-19 ./**path-to-app**

（ここはまだプロジェクトのコードベースには反映しない。）

2. エラーの原因を把握して、アップグレードの事前準備のタスクを作る

事前準備に必要なタスク：

styled-componentsライブラリーアップデートする
react-i18nextライブラリーアップデートする
@radix-ui/react-dialogと@radix-ui/react-toastライブラリーアップデートする

styled-componentsライブラリーアップデート(v5 → v6)

styled-componentsライブラリーアップデート(v5 → v6)のcssあたりの作業：

数コンポーネントを新しい型の書き換え
役200ファイルで正しくないcssセレクタを修正：主に& &と&&　→ &に修正
こまめのリグレッションテスト確認や手動の確認：hoverエフェクトなどの問題解消
リリース後のユーザー側エラーのモニタリング

アップグレード後のTypeError: i.replaceAll is not a functionエラーについて

原因：styled-components v6ではString.prototype.replaceAll()関数が使われるようになりましたが、その関数をサポートされてない古いブラウザーを使用するとエラーになります（String.prototype.replaceAll()関数をサポートされているブラウザーバージョンの一覧）

アップグレードの本作業

最初のステップのコマンドをもう一度実行する

yarn add --exact react@^19.0.0 react-dom@^19.0.0
yarn add --exact @types/react@^19.0.0 @types/react-dom@^19.0.0
npx types-react-codemod@latest preset-19 ./**path-to-app**

@types/reactと@types/react-dom を19.0.0にアップデートする
QA確認
本番へリリース

アップグレード後の作業

forwardRefあたりの作業：forwardRefは将来のReactバージョンで削除される予ですの、それにあたった作業　→ 参考
Context.Provider → Contextに変更 → 参考
その他ライブラリーもアップデート

アップグレードにおける最小限の作業は以上です。事前の準備のおかげで、スムーズに実行でき、次回のReact 20へのアップグレードも楽しみです。