React-spring: [v9] Uncaught (in promise) TypeError: Cannot read property 'asyncId' of undefined

Created on 9 Apr 2020 · 9Comments · Source: pmndrs/react-spring

Whenever my useTransition hook uses async await next it throws an error of

Uncaught (in promise) TypeError: Cannot read property 'asyncId' of undefined
    at _callee6$ (runAsync.ts:81)
...

Using Yarn Workspaces with react-spring version:
"react-spring": "9.0.0-canary.809.5.f01ecc2",

This is my code, based off https://github.com/react-spring/react-spring-examples/blob/pull-750/demos/hooks/notification-hub/index.js

const [refMap] = useState(() => new WeakMap())
const config = { tension: 125, friction: 20, precision: 0.1 }

const transitions = useTransition(blocks, {
    initial: null,
    from: { height: 0, opacity: 0, overflow: 'hidden' },
    enter: item => async next => {
      await next({ height: refMap.get(item).offsetHeight, opacity: 1, overflow: 'hidden', config })
    },
    leave: { height: 0, opacity: 0, overflow: 'hidden', config },
    key: block => block.id,
})

 return (
   <div>
      {transitions((style, block) => {
        return (
          <animated.div style={style}>
              <div ref={ref => ref && refMap.set(block, ref)>
                  <Block block={block} />
              </div>
          </animated.div>
        )
     })}
  </div>
)

Changing the transition to

const transitions = useTransition(blocks, {
    initial: null,
    from: { height: 0, opacity: 0, overflow: 'hidden' },
    enter: { height: 100, opacity: 1, overflow: 'hidden', config },
    leave: { height: 0, opacity: 0, overflow: 'hidden', config },
    key: block => block.id,
})

resolves the issue but I don't get access to the ref/dynamic height of the element within the transition.

Any ideas if this is a react spring issue or somewhere else? The transition worked in v8. I upgraded because I wanted to be able properly get access to the updated state within item (https://github.com/react-spring/react-spring/issues/949).

bug v9

Source