背景
Joy UI が React19に対応できていない箇所があることが分かりました。
調査したこと
エラー内容の詳細
React18をReact19に上げたところ以下のエラーが表示されました。
エラーの原因を探るとJoy UI のコードに問題があることが分かりました。
- react:19.1.0
- react-dom: 19.1.0
- mui/joy: 5.0.0-beta.52
Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.
こちらに関係しているreactの変更はreact19の公式で記載されています。
<ForwardRef(Modal2)>
エラーの箇所を見ると以下を指していました。
<Modal open={true} onClose={onClose}>
デバッグで該当のコードを見ます。
以下をクリックすると次のコードに遷移しました。
http://localhost:3333/node_modules/.vite/deps/@mui_joy.js?v=4701402b
つまり Joy UI の Modal コンポーネントのコード内でエラーが起きていることが分かりました。
Joy UI の Github
Joy UI の Github は以下です。
joy ui ref 等で調べましたが現在対応している情報がつかめませんでした。
Joy UI の StackOverflow
こちらでも現在対応している情報がつかめませんでした。
捕捉
material-ui だとこの問題は対応されているみたいです。
JoyUIにissueを投稿しました
issueを投稿してみました。
以下の記事にも内容を記載していますのでご覧ください！
今後の対応
社内のデザインシステムを導入しつつ、足りない部分は Joy UI 以外のライブラリを導入する案が有力です。
Joy UI が本件の対応をするか今後もチェックしたいと思います。
Discussion