react: 16.8.0-alpha.0 (and 16.7) IE11 Suspense doesn't stop rendering fallback after Lazy resolves
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.
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 17 (4 by maintainers)
Commits related to this issue
- Avoid new Set([iterable]) for thenables Fixes https://github.com/facebook/react/issues/14583 Using `new Set([iterable])` does not work with IE11's non-compliant Set implementation. By avoiding this ... — committed to aweary/react by deleted user 5 years ago
- Avoid new Set([iterable]) for thenables (#14592) Fixes https://github.com/facebook/react/issues/14583 Using `new Set([iterable])` does not work with IE11's non-compliant Set implementation. By av... — committed to facebook/react by aweary 5 years ago
- Avoid new Set([iterable]) for thenables (#14592) Fixes https://github.com/facebook/react/issues/14583 Using `new Set([iterable])` does not work with IE11's non-compliant Set implementation. By av... — committed to jetoneza/react by aweary 5 years ago
- Avoid new Set([iterable]) for thenables (#14592) Fixes https://github.com/facebook/react/issues/14583 Using `new Set([iterable])` does not work with IE11's non-compliant Set implementation. By av... — committed to n8schloss/react by aweary 5 years ago
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.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?
Ah okay, in that case it’s expected. React 16 requires both
MapandSet.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
Setis a happy accident.Hope it helps!
@aweary Thank you for the hint with Sets!
@Kazimirkas to clarify, I wasn’t suggesting that you use a
WeakSetpolyfill, 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
Setpolyfill does it work as expected?@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
SetThis is the working version for React 16.7
https://codesandbox.io/s/6mx088vvk
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
WeakSetpolyfill? Which Promise polyfill are you using?