React-spring: Regexp issue in createInterpolation

[jacobrask]

We are getting some crash reports in our system for the following code: https://github.com/react-spring/react-spring/blob/85b15f634ea4d987e0dfa57b24fa8179a714ddc9/src/shared/interpolation.js#L47
"Unable to get property 'map' of undefined or null reference"

I managed to reproduce it once, but the issue went away when I reloaded the page and I could not manage to reproduce it. I notice that the offending line seems to be the same in the 8.x branch.

Is this indicating a bug in the input to createInterpolation, or would it be fine to just add a check that match is not null? Creating a repro case is turning out to be difficult, but I'm pretty sure the crash happens in a simple spring between the following values:

const controlStates = {
  visible: {
    left: { transform: 'translate(0, 0)', opacity: 1 },
    right: { transform: 'translate(0, 0)', opacity: 1 },
    zoom: { transform: 'translate(-50%, 0%)', opacity: 1 },
  },
  hidden: {
    left: { transform: 'translate(-160%, 160%)', opacity: 0.5 },
    right: { transform: 'translate(160%, 160%)', opacity: 0.5 },
    zoom: { transform: 'translate(-50%, 160%)', opacity: 0.5 },
  },
};

[drcmda]

It's probably the percentage sign, input and output values must match. It's really missing some debug asserts though to make this more evident.

[jacobrask]

I updated the transform to translate(0%, 0%) but we are still seeing the error unfortunately. Could it be an issue with the - as well?

[drcmda]

i sure hope not, that has to be valid. could i get a codesandbox that reproduces it?

[bhollis]

I'm hitting this too - I'm doing something like this:

to={{ transform: `translateY(${yDelta}px)` }}

Where the resolved string is translateY(303px). entry.interpolations.calc is producing the value translateY(NaNpx) which crashes the subsequent code.

From the debugger:

[bhollis]

entry.parent.value is 0 in this screenshot.

[bhollis]

This started happening when we updated from 7.1.1 to 7.2.10.

[bhollis]

Haven't been able to repro in a code sandbox yet, but I have verified that this was introduced in 7.2.0.

[bhollis]

OK, this isn't the best repro, but I'm not sure what the exact state is that causes this to fail! But if I leave this going for long enough, it'll throw this error: https://codesandbox.io/s/l20y88kv59

[bhollis]

OK I reworked it with react-with-gesture and now it reproduces easily (this is close to what my app is doing). Just drag down on the text a few times and let go, eventually it'll hit the error.

[drcmda]

Thanks, will take a look!

[jacobrask]

@bhollis did you manage to work around this in the mean time, with manual interpolation or something?

[bhollis]

No, I just didn’t upgrade.

[ruggedy]

Found the problem .. should have a fix soon.

[bhollis]

Any update?

[drcmda]

It's fixed in 8.0.14. Sorry it took so long!

[bhollis]

No sweat, thanks for all your hard work!

[bhollis]

@drcmda I can still reproduce on 8.0.15: https://codesandbox.io/s/ol0kw7pr29

[drcmda]

renderprops still have it. i hope when hooks become accepted and 16.8.x can become the default peer dependency, then maybe we can move the two libs together again. there's already a pr for this. the biggest unsolved problem is "auto", which doesn't exist in hooks.

[bhollis]

Hmm, I was hoping to be able to start using the hooks for new stuff without having to rewrite all my older stuff. Thanks for clarifying though, I’ll think about how to convert them to hooks.