question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:17 (9 by maintainers)

github_iconTop GitHub Comments

2reactions
gaearoncommented, Jan 15, 2019

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.

1reaction
awearycommented, Jan 14, 2019

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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

All You Need To Know About React Suspense - CopyCat Blog
It suspends the component from rendering until the required data is obtained and provides a fallback UI during the fetch duration. What is...
Read more >
React - Releases
renderToString : Will no longer error when suspending on the server. Instead, it will emit the fallback HTML for the closest <Suspense> boundary...
Read more >
React 16.x Roadmap – React Blog
We plan to split the rollout of new React features into the following milestones: React 16.6 with Suspense for Code Splitting (already shipped) ......
Read more >
Update on Async Rendering - React
The new static getDerivedStateFromProps lifecycle is invoked after a component is instantiated as well as when it receives new props.
Read more >
react - Awesome JS
The deferred render is interruptible and doesn't block user input. ... Layout Effects with Suspense: When a tree re-suspends and reverts to a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found