[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.

シェア!

この記事を書いた人

kenichiのアバター kenichi エンジニア・写真家 | Engineer and photographer

Nomadic worker who travels all over Japan and abroad; worked as a technical sales person for five years before going independent.
Works as a freelance engineer on website production and application development. Currently working to bring interesting things by interesting people to the world, while seeking to move abroad.

目次