Cannot read property 'push' of undefined (translate3d)

[adjourn]

v7.2.10

const [styles, set] = useSpring(() => ({
  native: true,
  transform: 'translate3d(0,400px,0)',
}));

// inside gesture handler
set({
  native: true,
  immediate: immediate,
  transform: `translate3d(0,${nextY}px,0)`
});

// render
<animated.div style={styles}>Content</animated.div>

No errors when immediate is false, only happens if it's true.

Here's the source:

Im unable to report any patterns at this point, seems to happen randomly:

[drcmda]

i think it could be the native flag, could you remove that? it's native by default. otherwise i can't see anything wrong there ...

[adjourn]

I removed native flag, same thing. I've discovered that it happens when I do fast movements with gesture, doesn't happen when I move it slowly.. Very odd because error comes from react-spring and transform is always valid.

Do you have anything else in mind? I'll try to replicate it.

[drcmda]

could you pour it into a codesandbox? my guess is that nextY is NaN or something like that, there has to be a reason for the interpolator to crash out but i'm sure we can track it down.

[adjourn]

CodeSandbox Same error but it occurs in different situation.. Details are there. Sorry about weird math and ifs, still a prototype but every path should return a number.

Im starting to suspect that it might have something to do with React (state, re-rendering or even portal?).

[drcmda]

well the crash is inside the interpolator. don't worry, i will trace and fix it. thanks for the csb!

[adjourn]

I updated CodeSandbox with some additional information, hopefully it's a bit more useful now.

[zeeyang]

Seeing the same error when immediate flag is on.

Update: found a workaround by directly calling interpolation. Hope this helps.

import { Spring, interpolate } from "react-spring"
...
<Spring to={{ yOffset: 100, scale: 2.0 }} ... >
{ spring =>
    const transformFn = (y, s) => `translate3d(0px,${y}px,0) scale(${s})`
    const style = { transform: interpolate([spring.yOffset, spring.scale], transformFn) }

[ruggedy]

I am tracing the problem for these . Should hopefully have a fix very soon soon

[a-m-dev]

any solution ??? i'm facing the same issue right now

nothing is working

[zeeyang]

@a-m-dev there's a workaround in my previous comment. Pass numbers into spring (or useSpring), and use interpolate function to transform to css.

[drcmda]

@adjourn @a-m-dev @zeeyang sorry for the delay, was super busy with something else recently. i am looking at it now and it's the immediate flag that seems to throw it off tracks. when i remove it it works fine. fix comes hopefully today if i can find it that fast.

[drcmda]

It's fixed, was a really silly bug somewhere in the controller. I will look after some other issue now and publish afterwards.