[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

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 #985 (comment)

[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 #985 (comment)

[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 #985 (comment)

[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 #985 (comment)

[aleclarson]

@KB1RMA this way has worked for me in the past (separate loaders + unix/windows path regex) webpack/webpack#2031 (comment)

Originally posted by @tim-soft in #985 (comment)

[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 #985 (comment)

[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