[react-spring]Fixed type error in TypeScript.「Type instantiation is excessively deep and possibly 」

The implementation was done using the React graph drawing library ‘react-spring‘.

While using styled-components, setting the animated.div style and running ‘yarn typecheck’,

‘Type instantiation is excessively deep and possibly’.

error occurred.
The results of improving the error are described.

Also, the Nextjs version in this article is “13.5.4” and the Rcharts version is “9.0.0”.

Cause of error.

With this code, “Type instantiation is excessively deep and possibly” occurs.

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


const Animated = styled(animated.div)``

Fixed code.

It seemed to appear when using the styled-components props, so it was improved by defining the any type in styled.

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

Summary

I don’t know if it’s a problem with the compiler or some cause in the library… This is not a major problem here, so we are happy with this definition.