概要
Next 15(React 19 を使用)で、@react-three/fiberを使う際、以下のように説明されています。
R3F v8 is not compatible with React 19 or Next 15, which uses React 19. Use the R3F v9 RC instead which can be installed with @react-three/fiber@rc.
(日本語訳)R3F v8 は React 19 や Next 15(React 19 を使用)と互換性がありません。代わりに R3F v9 RC を使用してください。インストールするには @react-three/fiber@rc を使用してください。
一方、マウス操作を行うために以下を追加しましたが、@react-three/fiber@rcとは相性が悪いようでした。
https://www.npmjs.com/package/@react-three/drei
この問題に対する対処法の備忘録です。
方法
本記事執筆時点(2025-02-06)の情報です。
まず、@react-three/fiber@rcではなく、@react-three/fiber@alphaをインストールする必要がありました。(@betaでもよいかもしれません。)
そして、dreiについては、@react-three/drei@10.0.0-rc.1をインストールしました。結果、以下のような組み合わせでは、無事にインストールすることができました。
まとめ
考慮が不十分な点があるかもしれませんが、参考になりましたら幸いです。