遭遇したエラー
React のバージョンを上げようとした際 @types/react と @types/react-dom を ~18.0.0 から ~18.2.0 に上げたところ、以下ようなエラーが発生しビルドが失敗するようになってしまいました。
Type 'React.ReactNode' is not assignable to type 'import(".../node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.
Type 'PromiseLikeOfReactNode' is not assignable to type 'ReactNode'.
原因と解決方法
依存関係にあるライブラリが React 18.2.0 に対応していないのが原因だったらなかなか面倒だなと思ったのですが、 yarn.lock を確認したところ間接的な dependencies によって複数のバージョンの @types/react が重複してインストールされてしまっていました。
（yarn berry を使用していますが、適宜 npm や pnpm に読みかえてください。）
複数バージョンの @types/react がインストールされてしまっている状態
yarn.lock や package-lock.json などのロックファイルはインストール時に依存関係のバージョンが勝手に変わらないようにしてくれますが、間接的に依存関係にある "@types/react": "*" が 18.0.26 に固定されてしまっており、使用しようとしている ~18.2.0 と別でインストールされてしまっています。（よく見ると元々2バージョン入ってしまっていたようですが...）
@types/react-dom の dependencies に "@types/react": "*" が指定されているため @types/react と @types/react-dom をセットでバージョンアップすると必ずこの状態になってしまいます。
エラーメッセージをよく見ると通常は node_modules/@types/react を参照するはずが node_modules/@types/react-dom/node_modules/@types/reactというディレクトリを参照してしまっていることからも、今回も @types/react-dom の dependencies が原因であったということがわかります。
こうなってしまった場合 yarn.lock 内の古いバージョンの行を消して yarn install を実行するか、 yarn dedupe @types/react (yarn berryの場合)を実行することによって古いバージョンへの固定を解除できます。
@types/react のバージョンが1つにまとまっている状態
複数バージョンのインストールを解消したことで冒頭のエラーも出なくなり、無事ビルドが通るようになりました 🎉
まとめ
npm ライブラリのバージョンアップ時、今回のように複数バージョンのライブラリがインストールされてしまうことは良くあるのですが、エラーの内容が直接的でないため原因特定が大変になってしまうことが多いです。
この現象自体は React に限った話ではないのですが react や @types/react では特に問題になりやすいので、バージョンアップ時にエラーになったら複数バージョンがインストールされてしまっていないかまずは疑ってみると良いでしょう。
今回はロックファイルを修正しましたが "resolutions" フィールドを指定してバージョンを強制してしまうのも一つの手です。
Discussion