[v9.0.0-rc.3] useTransition fails to leave in IE11

When using /web.cjs I seem to be having an issue in IE11 where the element fades in, but won’t fade out or unmount.

Example component that fails to “leave” in IE

import React from "react";
import { useTransition, animated } from "react-spring/web.cjs";

export default function App() {
  const [hidden, setHidden] = React.useState(false);
  const transition = useTransition(hidden, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });

  return (
    <div>
      {transition(
        (props, item) =>
          item && <animated.div style={props}>Some hide/show text</animated.div>
      )}
      <button onClick={() => setHidden(!hidden)}>Show/Hide</button>
    </div>
  );
}

Everything appears to work without issue in all other browers I’ve tested so I’m guessing it’s just a bug. There aren’t any exceptions thrown.

_Originally posted by @KB1RMA in https://github.com/react-spring/react-spring/issues/985#issuecomment-629433487_

[KB1RMA]

@aleclarson I’ve been able to confirm this ultimately did end up being a polyfill issue and not related to transpilation.

Nextjs had omitted 2 very specific polyfills from core-js. 'core-js/features/function/name' and 'core-js/features/object/keys' .

Definitely thanks to @tomdohnal for saving me from pulling my hair out trying to track this down.

I think we can close this to tidy up your bug list

[KB1RMA]

I had a little more time to dig into this so I want to provide a bit more information as it looks like more is broken than I initially had thought.

I’ve confirmed I’m putting all the @react-spring libraries through babel-loader:

• @react-spring/web
• @react-spring/core
• @react-spring/shared
• @react-spring/animated

In addition to my initial example not unmounting, I’ve now noticed that this simple example only using useSpring appears to be broken as well.

Chrome outputs ["opacity"] to the console:

However IE outputs an empty array for props:

import { useSpring, animated } from "@react-spring/web";

export default function App() {
  const [hidden, setHidden] = React.useState(false);
  const props = useSpring({ opacity: hidden ? 0 : 1 });

  console.log(Object.keys(props));

  return (
    <div>
      <animated.div style={props}>Some hide/show text</animated.div>
      <button onClick={() => setHidden(!hidden)}>Show/Hide</button>
    </div>
  );
}