Cannot read property 'push' of undefined

[brunolemos]

Related: #468 (but I'm not using translate)

Looking at the stack trace seems to be coming from this line:

https://github.com/react-spring/react-spring/blob/e73385837e7a75ef64e82d17a28e7c86fb5c0e49/src/shared/interpolation.ts#L48

The only code I'm using interpolation is this: https://github.com/devhubapp/devhub/blob/d6f8854c42f1a236bbd73bfa5a96cb18c8b380d2/packages/components/src/components/common/AccordionView.tsx#L18-L53

This seems to be some edge case thing. My electron app was minimized the whole day and when I reopened it this happened.

(and the theme colors were all buggy, might be related to this or not. first time I saw this and at the same time I got the error report on bugsnag):

[drcmda]

interpolation also triggers for upfront stuff like colors in the spring definition and so on. you could put a log in there so that when it happens you can trace it back to the component code. it's not terribly type safe atm and if by accident you put a NaN/null/undefined/true/false/etc into it you can blow it up, then the interpolator will choke on it. There's some value for sure that's getting in there that isn't the state you probably expect it to be.

If you have made out the position where the weird data goes in i could help with looking for the cause.

[brunolemos]

I was able to add a breakpoint and see the value of the variables:

This is at this line: https://github.com/react-spring/react-spring/blob/3f3464d754a9dd51598ef442dab8bc5482f1b439/src/shared/stringInterpolation.ts#L47

The app stays minimized for a long time, then I open it, my redux-saga dispatches an action that will trigger the theme change (because of the day/night change) and this happens. It's weird that it stays broken (keeps throwing this) if I tap to change theme again after this. Only goes back to normal after I refresh the page.

May be related to #380 since it's showing rgba(NaN, NaN, NaN, 1).

Stack trace

index.js:1452 uncaught at init TypeError: Cannot read property 'push' of undefined
    at http://localhost:3000/static/js/0.chunk.js:142526:30
    at Array.forEach (<anonymous>)
    at http://localhost:3000/static/js/0.chunk.js:142525:35
    at Array.forEach (<anonymous>)
    at createStringInterpolator (http://localhost:3000/static/js/0.chunk.js:142524:15)
    at createInterpolator (http://localhost:3000/static/js/0.chunk.js:142050:12)
    at AnimatedInterpolation.updateConfig (http://localhost:3000/static/js/0.chunk.js:142126:19)
    at http://localhost:3000/static/js/0.chunk.js:143188:35
    at Array.reduce (<anonymous>)
    at Controller.diff (http://localhost:3000/static/js/0.chunk.js:143137:53)
    at http://localhost:3000/static/js/0.chunk.js:143021:70
    at Array.forEach (<anonymous>)
    at Controller.start (http://localhost:3000/static/js/0.chunk.js:142999:15)
    at http://localhost:3000/static/js/0.chunk.js:143344:21
    at Array.map (<anonymous>)
    at http://localhost:3000/static/js/0.chunk.js:143342:27
    at http://localhost:3000/static/js/main.chunk.js:10407:5
    at resolve (http://localhost:3000/static/js/main.chunk.js:14732:7)
    at update (http://localhost:3000/static/js/main.chunk.js:14724:5)
    at http://localhost:3000/static/js/main.chunk.js:14713:7
    at Object.dispatch (http://localhost:3000/static/js/0.chunk.js:150117:7)
    at e (<anonymous>:1:40553)
    at http://localhost:3000/static/js/0.chunk.js:148134:22
    at http://localhost:3000/static/js/main.chunk.js:16741:7
    at http://localhost:3000/static/js/main.chunk.js:16771:9
    at dispatch (http://localhost:3000/static/js/0.chunk.js:150516:28)
    at http://localhost:3000/static/js/0.chunk.js:149813:12
    at http://localhost:3000/static/js/0.chunk.js:148730:52
    at exec (http://localhost:3000/static/js/0.chunk.js:149442:5)
    at flush (http://localhost:3000/static/js/0.chunk.js:149485:5)
    at asap (http://localhost:3000/static/js/0.chunk.js:149457:5)
    at runPutEffect (http://localhost:3000/static/js/0.chunk.js:148726:60)
    at runEffect (http://localhost:3000/static/js/0.chunk.js:148669:280)
    at next (http://localhost:3000/static/js/0.chunk.js:148539:9)
    at currCb (http://localhost:3000/static/js/0.chunk.js:148622:7)

[drcmda]

could you paste more code, where does the color come from, which spring is it, and which props are you feeding it. this stuff is normally the easiest to fix, if it is a problem in spring i'll find it.

[amadeus]

I've seen this bug as well. I haven't found a reliable way to repro yet.

What I can say is that the person who reported the bug to me - said the crash happens after they wake their laptop up from being asleep.

To me this would point to something related to time (i.e. a lot of time passing with no animations and then perhaps resuming or starting an animation after a long wait? Grabbin at straws here).

I can share the component here, since it's pretty small:

/* @flow */

import * as React from 'react';
import classNames from 'classnames';
import {Spring, animated} from 'react-spring/renderprops';

import styles from './AnimatedHalfPill.mod.css';

const SPRING_CONFIG = {
  tension: 400,
  friction: 30,
};

type AnimatedHalfPillProps = {|
  hovered: boolean,
  unread: boolean,
  selected: boolean,
  className?: ?string,
|};

class AnimatedHalfPill extends React.Component<AnimatedHalfPillProps> {
  static defaultProps = {
    selected: false,
    hovered: false,
    unread: false,
  };

  render() {
    const {className, hovered, selected, unread} = this.props;
    return (
      <div className={classNames(className, styles.wrapper)}>
        <Spring
          native
          config={SPRING_CONFIG}
          immediate={process.env.NODE_ENV === 'development' ? false : !document.hasFocus()}
          to={{
            opacity: selected ? 1 : 0.6,
            height: selected ? 40 : hovered ? 20 : 8,
            transform: hovered || selected || unread ? `translate3d(0px, 0, 0)` : `translate3d(-4px,0,0)`,
          }}>
          {style => <animated.span className={styles.item} style={style} />}
        </Spring>
      </div>
    );
  }
}

export default AnimatedHalfPill;

Pretty sure, based on the stack trace, that the issue is related to the translate3d interpolation

[brunolemos]

I don't use translate so it's probably any spring animation.
We do have the "after the notebook wake up" in common!

[amadeus]

Yeah - I think it might be something related to string interpolation - since it's not an error for the numbered values.

I have a theory that it could be related to me not using a from prop, so I tried adding a from/to props that are both the same, and will see if it continues to happen.

[brunolemos]

@amadeus do you use javascript function generators (function* ()) in your app? (e.g. redux-saga, etc).

I'm suspecting this is causing some issues in my app because it's transpilled to es5, not sure if related to this issue specifically yet (but it's one generator that dispatches a theme change in my app, so...).

[amadeus]

In the case of this particular component, there are no generators involved as parents to or as a result of triggering this animation. We don't use redux either.

[amadeus]

Ok, good news! I figured out an easy repro!

It has to do with being in immediate mode and applying a few different spring updates asynchronously.

See this codepen for an easy crash:

https://codesandbox.io/s/qvn4noqo0w

If you update immediate to be false in the state, then the animation will work exactly as expected. But with immediate set to true, it crashes instantly.

[drcmda]

Good work, let's see what this is all about ...

[amadeus]

Any update on this? I can try digging in myself, but would probably take me a bit to get situated.

[drcmda]

i think it could be solved. @aleclarson is this in the v9 branch already?

[aleclarson]

Not sure. @amadeus Can you give it a try with the v9 branch?

git clone https://github.com/react-spring/react-spring.git --branch v9 --depth 1
cd ./react-spring
yarn
yarn link

# In your repro directory:
yarn link react-spring

[amadeus]

I don't have much experience using yarn link - but it doesn't seem to work here because I am attempting to import react-spring/renderprops and it appears yarn link doesn't know how to resolve this?

I was able to work around by just replacing the built files in node_modules with the ones from that branch, however it doesn't appear that the bug is fixed.

I tried porting the example to useSpring - however the bug does not appear to exist there, it's something related to the renderprops version specifically.

Doing a bit more digging, threw in some breakpoints and started looking at what was being evaluated, and I think I found the source of where the issue stems from - but I don't totally have the context for how to fix.

to start with the animation goes through 2 states, and the animated values iteratate through 3 different values:

Stage 1 (initial): 'translate3d(0, 0px, 0)'
Stage 2 (once the button is clicked): 'translate3d(0, 50px, 0)'
Stage 3 (set on the next tick after stage 2 is set): 'translate3d(0, 100px, 0)'

In this demo - it appears that stage 2 sets fine with no issue. The crash occurs when attempting to set stage 3 (only while in immediate mode) - and i think there must be some sort of race condition where createInterpolation attempts to create from and to values, and is somehow unable to access the stage2 as the from value as you can see from these logs I created:

I added a breakpoint right before the crash, and walked back up the stack trace to where I think the issue starts:

I don't really have a whole lot more context on how this is supposed to work, but hopefully this is helpful for you guys at identifying why it breaks.

[aleclarson]

@amadeus So #632 fixes this bug, but (currently) only for hooks. Once I finish #561, the render-props API will get the same fixes as hooks. The current Controller class used by the render-props API is no longer maintained, but you can send a PR if you want. Personally, I would wait for #632 to be merged.

[amadeus]

What's the timing on v9? Looks like I may have to disable immediate mode until then.

[aleclarson]

ASAP. Working on revamping the TypeScript defs, then merging #561 into that. Hopefully today!

[ratbeard]

I ran npm i react-spring@react-spring/react-spring#5932afd4a0ed5a989cd2358d6507b00efc31f421 and can confirm that this fixes the issue for us as well. We use immediate: true in e2e tests and were seeing this issue come up maybe 30% of the time in test runs.

I made this webpack config change to make the new version work, in case its useful to anyone:

    resolve: {
     extensions: ['.js', '.ts', '.tsx', '.jsx'],
     alias: {
-      'react-spring$': 'react-spring/web.cjs'
+      'react-spring$': 'react-spring/dist/web.cjs'
     },
   },
 };

Thanks a lot for your hard work 👍 👍

[aleclarson]

You can use v9 like this now: yarn add react-spring@next

Let us know how it goes: #642

[igregor]

Hey!

For those, who cannot / don't want to use v9 beta, I made up with a workaround that works out.

<Spring config={{ duration: 1 }} />

Then you don't use immediate but you achieve the same behavior. And the bug is gone.

Of course, again, it's a WORKAROUND :)