😰

MUIのBoxが@react-three/fiberで「式は、複雑すぎて表現できない共用体型を生成します。ts(2590)が出る。」

2024/03/31に公開

TypeScript

はじめに

@react-three/fiberをinstallしたところ、MUIのBoxで

式は、複雑すぎて表現できない共用体型を生成します。ts(2590)

と出た。
どうやら、@react-three/dreiの型が競合しているらしい。
他にもchakra UIでも同様のエラーが出るらしい。

解決方法

解決方法1 (面倒。。。)

調べたところ

<Box component="div"></Box>

とするのが多かった。しかし、これだとBoxの使用が多いと大変であり、component="svg"など使っていると解決できなかったりする。

GitHub GistのページURLを指定してください

そもそも、@react-three/fiber側をどうにかした方が良さそう。

解決方法2 (こちらで行った)

GitHub GistのページURLを指定してください

を参考にした。
node_modules/@react-three/fiber/dist/declarations/src/three-types.d.tsを見てみると、自分のところでは5種類しか使っていない。よってこれ以外についてはnode_modulesから消すことにした。patch-packageを使用することで永続化した。(しかし、Boxの型

npm install patch-package postinstall-postinstall --save-dev
# または
yarn add patch-package postinstall-postinstall --dev

とし、

"scripts": {
  "postinstall": "patch-package"
}

を追加した。
その後、node_modules/@react-three/fiber/dist/declarations/src/three-types.d.tsから

-        interface IntrinsicElements extends ThreeElements {
+        interface IntrinsicElements extends Pick<ThreeElements, 'orbitControls' | 'sky' | 'stars' | 'pointLight' | 'ambientLight > {

とした。その後、この変更をパッチとして保存するため、

npx patch-package @react-three/fiber

npm install

を実行した。

おわりに

初zennというか初技術系の投稿でした。結構困っていたので、何かお役に立てたらと思います。