"Cannot animate to the given "to" prop, because the current value has a different type"

[DeviousM]

🐛 Bug Report

Basically on every Trail animation init there's an error thrown somewhere deep in the library (either index.js or SpringValue.ts), even though everything animates properly.

The error being thrown is Cannot animate to the given "to" prop, because the current value has a different type. Can be found in both SpringValue.ts:606 and index.js:1213

To Reproduce

Create a Trail animation on a page and in the console you can see that there are multiple errors.

Expected behavior

Well, obviously not having that error.

Link to repro (highly encouraged)

https://codesandbox.io/s/restless-pine-nkdeb (open Chrome's console, because the built-in is not showing it).

Environment

• react-spring v9.0.0-canary.808.11.4be2ac3
• react v16.10.2

[diagramatics]

Found out it was this particular line:

https://github.com/react-spring/react-spring/blob/652955e67f56595176e70c08a2d777eaccd35be6/packages/core/src/SpringValue.ts#L476

The type comparison when you animate between string values becomes a nodeType: AnimatedValue compared to node.constructor: AnimatedString. Testing it out with the demo with a breakpoint on that line will give you that particular hint, and it's caused from animating between transform string values. The demo ends up not having the translateY animations.

The workaround is to not use string types at all, but this definitely is not the ideal scenario. _getNodeType probably needs updating, but I'm not familiar enough with the codebase to figure this one out.

[vincentdesmares]

We had to downgrade to 9.0.0-beta.34 due to this bug. Sadly it appears in all browsers. It also makes IE11 crash due to the flooding of error when the console is open, but it's IE... so I guess it would have been expected.

[DeviousM]

@aleclarson - do you have any ETA the fix? I'm asking because it's flooding our Sentry instance badly everyday.

[aleclarson]

Should be fixed in 9.0.0-canary.808.17.55c5691

[simpleshadow]

@aleclarson I'm still seeing the error with 9.0.0-canary.808.17.55c5691.

Error: Cannot animate to the given "to" prop, because the current value has a different type

Will try to provide a way to repro. I have a lot of animations going on so isn't clear what started it or is causing it as the error originates from FrameLoop.update.update and only happens occasionally on initial render.

[simpleshadow]

Update: Believe I resolved my issue — I was using a useRef with useEffect to measure an element incorrectly such that I believe the ref was null when the animation was called, causing the error.

For others, the proper way to set a ref for measuring is to use useCallback.