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

[aleclarson]

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

```js
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 (

{transition(
(props, item) =>
item &&
)}

);
}

````

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_

[aleclarson]

@KB1RMA Your best bet is to transpile react-spring for ie11 in your webpack config, pass anything in that folder (/node_modules/react-spring) thru babel-loader. There is stuff in the cjs build that is gonna break ie11. Polyfilling via babel-'s core-js setup in your app is also a given.

_Originally posted by @tim-soft in https://github.com/react-spring/react-spring/issues/985#issuecomment-629453781_

[aleclarson]

@KB1RMA Your best bet is to transpile react-spring for ie11 in your webpack config, pass anything in that folder (/node_modules/react-spring) thru babel-loader. There is stuff in the cjs build that is gonna break ie11. Polyfilling via babel-'s core-js setup in your app is also a given.

I just tried that and it's still broken in the same way unfortunately! Still no console errors either - silent failure.

Edit: And yeah, everything else is all polyfilled properly - This is a pretty large project and this is my only IE11 issue. I just pulled a small reproduction out.

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

[aleclarson]

I just tried that and it's still broken in the same way unfortunately!

Maybe you messed up? How are you using babel-loader?

Be sure every package in node_modules/@react-spring/** is compiled. (Note the @)

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

[aleclarson]

@KB1RMA this way has worked for me in the past (separate loaders + unix/windows path regex) https://github.com/webpack/webpack/issues/2031#issuecomment-573271725

_Originally posted by @tim-soft in https://github.com/react-spring/react-spring/issues/985#issuecomment-629472038_

[aleclarson]

Maybe you messed up? How are you using babel-loader?
Be sure every package in node_modules/@react-spring/** is compiled. (Note the @)

It's most entirely possible! I'm using Nextjs and next-transpile-plugins, but it looks like the loader config it sets up should be okay. And I see transpiled code in my bundles.

Here's a CodeSandbox of essentially what I have setup: https://codesandbox.io/s/happy-breeze-p37cl?file=/next.config.js

What's throwing me is plenty of other things appear to work okay. And it does animate, it just doesn't complete or unmount. And no console errors.

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

[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>
  );
}

[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