React: 16.8.0-alpha.0 (and 16.7) IE11 Suspense doesn't stop rendering fallback after Lazy resolves

[Kazimirkas]

Do you want to request a feature or report a bug?

report a bug

What is the current behavior?

When using Suspense, I see React.Suspense fallback layout instead of loaded component in IE 11 (IE network panel shows, that bundle was loaded)

I can not reproduce this bug in 16.7.0-alpha.2! there is everything ok.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

const UserCabinet = React.lazy(() => import('PublicUser/components/UserCabinet/UserCabinet'));

function WaitingComponent(Component) {
  return props => (
    <React.Suspense fallback={<div>Loading...</div>}>
      <Component {...props} />
    </React.Suspense>
  );
}

class PublicRoutes extends React.Component<{}> {
  render() {
    return (
      <Switch>
        <PublicPage path="/login" component={AuthPage} />
        <PublicPage path="/signUp" component={SignUpPage} />
        <PrivatePage path="/cabinet" component={WaitingComponent(UserCabinet)} />
        <Redirect to="/login" />
      </Switch>
    );
  }
}

What is the expected behavior?
see the rendered component

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Tested on IE11 on windows 7
It reproduces only in 16.8.0-alpha.0
I can not reproduce this bug in 16.7.0-alpha.2, there is everything ok.
In Chrome is everything ok in all versions.

[Kazimirkas]

the problem was with requirements for additional polyfills in newer version

[gaearon]

Hmm which ones? I wouldn't expect that.

[gaearon]

Could be the same as https://github.com/facebook/react/issues/14570. A reproducing example would be very helpful; that's unexpected.

[threepointone]

@Kazimirkas can you try running this codesandbox and see if it runs on IE11? https://codesandbox.io/s/oo3rn9z8wq if not on codesandbox, try to run it locally. thanks!

[aweary]

I tested this in IE11 with a small example using Suspense as well as @threepointone's example and both appear to work correctly.

@Kazimirkas are you possibly using a WeakSet polyfill? Which Promise polyfill are you using?

[Kazimirkas]

@gaearon @threepointone. IE11 didn't throw any exceptions. So, that I don't know yet, what exactly polyfill do I need. I solved my problem with polyfill.io. I can use only the core-js promise polyfill for 16.7.0-alpha.2 and it works.
Im using browserstack for IE11. Unfortunately WeakSet polyfill (as @aweary recommended) dint't helped.

This is the case without bug React 16.7.0-alpha.2
https://codesandbox.io/s/vyrn9yqy87

This is the buggy case React 16.7
https://codesandbox.io/s/n3kz6l7q9j

I will try to find the exact polyfill, but I don't have any ideas yet :).
I runned those examples locally, because they wan't work form sandbox, IE requires more stuff

[Kazimirkas]

[Kazimirkas]

@gaearon @threepointone I found matching polyfills after reading https://github.com/facebook/react/commit/4a1072194fcef2da1aae2510886c274736017fbd and @aweary question about Weakmap
You need to import not only the Promise, you need to add Set

import "core-js/es6/promise";
import "core-js/es6/set";

This is the working version for React 16.7

https://codesandbox.io/s/6mx088vvk

[aweary]

@Kazimirkas to clarify, I wasn’t suggesting that you use a WeakSet polyfill, I was just asking if you were already using one. Just in case it might have been a bad implementation that was causing problems.

If you only include the Set polyfill does it work as expected?

[Kazimirkas]

You're right, I just removed WeakSet and it also works.

[Kazimirkas]

@aweary Thank you for the hint with Sets!

[gaearon]

Ah okay, in that case it's expected. React 16 requires both Map and Set.

This is in the documentation:
https://reactjs.org/docs/javascript-environment-requirements.html

And in React 16 release notes:
https://reactjs.org/blog/2017/09/26/react-v16.0.html#javascript-environment-requirements

That it worked before without Set is a happy accident.

Hope it helps!

[aweary]

It worked because IE11 has native Set implementation, but it isn't compliant. The issue is likely https://github.com/facebook/react/commit/4a1072194fcef2da1aae2510886c274736017fbd#diff-1996f2b11f9c68c0a81652e32be88ddbR217, where we use the new Set([iterable]) API which IE11 doesn't support.

@gaearon maybe we should warn for this?

[Kazimirkas]

@aweary And how about the Promise ? :) https://github.com/reactjs/reactjs.org/issues/1552

[gaearon]

Ahh. @aweary Can you send a PR that just replaces it with an add() right after creation? I think we didn't want to rely on this.

[gaearon]

@Kazimirkas If you use lazy you need Promise by definition — it depends on you using dynamic import which gives you a Promise.

[nikeee]

For me, adding the polyfills for Promise, Set and Map did not suffice. Instead, this is what worked for me in the index.js:

import "react-app-polyfill/ie11";