[react-spring]TypeScriptの型エラーを直す「Type instantiation is excessively deep and possibly 」

Reactのグラフ描画ライブラリ「react-spring」をつかって実装をしていた。

styled-componentsを利用しつつ、animated.divのstyleを設定して、「yarn typecheck」を実行すると、

「Type instantiation is excessively deep and possibly 」

のエラーが発生した。
エラーを改善した結果を記載する。

また、本記事のNextjsのバージョンは”13.5.4″、Rchartsのバージョンは”9.0.0″です。

エラーが発生したコード

このコードだと、「Type instantiation is excessively deep and possibly 」が発生する。

<Animated
  style={{
    ...fadeInOutAnimation,
  }}
></Animated>


const Animated = styled(animated.div)``

修正したコード

styled-componentsのpropsを利用するときに出てるようだったので、styledにany型を定義することで改善した。

const Animated = styled(animated.div)<any>``

Summary

コンパイラーに問題があるのか、ライブラリの何らかの原因なのかはわからないですが…ここが大きな問題なることはないので、この定義で良しとしています。