Suspense/lazy not working as expected in IE11 (display: none not being removed)

[jaruesink]

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

What is the current behavior?
Suspense adds display: none to all top level child elements in IE11.

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:
https://codesandbox.io/s/w0573w2owk
Code sandbox can't render in IE11 either, but in this example I would expect to not see IE11 because the div would have display: none on it.

What is the expected behavior?
To be visible and not have display: none on the children.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
I had to revert back to react-loadable to fix this.

[gaearon]

Is it IE11 specific or a general bug? There’s a few general bugs we’re tracking right now.

[jaruesink]

IE specific, it worked on Chrome/Safari, but in IE11 the display: none; was left on all the child components. I was able to go and check that style off in the inspector and see the components were loaded just fine.

[sophiebits]

If I take your CodeSandbox, add react-app-polyfill/ie9 and edit the package.json to compile for IE11 support: https://codesandbox.io/s/5wnv4nj6mk – then download that, build it locally, and deploy to now.sh at https://build-aoelkthmva.now.sh/, then I get a page that successfully displays "hello world" when opened in IE11.

[sophiebits]

@jaruesink Can you confirm if I'm doing anything different from what you tested?

[jaruesink]

Hmm I was hoping it would be as simple as that. But I guess it is more complicated. I'm using it with the router for lazyloading router components.

Here is my file that was working everywhere except for IE.

//@flow

// Vendors
import React, { Component, Suspense } from 'react';
import { connect } from 'react-redux';
import { Route, Switch } from 'react-router';
import { ConnectedRouter as Router } from 'connected-react-router';
import classnames from 'classnames';

import { history } from '../store';

// Layouts
import { LayoutAuth, LayoutPublic } from './';

// Styles
import './page-layout.scss';

// Components
import { Loading } from '../components';

// Types
type Props = {
  isAuthenticated: boolean
};

class LayoutGlobal extends Component<Props> {
  render() {
    const { isAuthenticated } = this.props;

    return (
      <Router history={history}>
        <div
          className={classnames('layout-global', {
            'layout-global-public': !isAuthenticated,
            'layout-global-auth': isAuthenticated
          })}
        >
          <Suspense fallback={<Loading />}>
            <Switch>
              <Route exact path="/" component={LayoutAuth} />
              <Route path="/account" component={LayoutAuth} />
              <Route exact path="/sign-in" component={LayoutPublic} />
              <Route path="/create-account" component={LayoutPublic} />
              <Route path="/forgot-password" component={LayoutPublic} />
              <Route component={false ? LayoutAuth : LayoutPublic} />
            </Switch>
          </Suspense>
        </div>
      </Router>
    );
  }
}

const mapStateToProps = ({ auth: { isAuthenticated } }): Object => ({ isAuthenticated });

export default connect(mapStateToProps)(LayoutGlobal);

[sophiebits]

Oh, I think I found the bug.

[rodoabad]

I love GitHub issues/prs. I can easily track the problem, what caused it, and how to fix it! I was looking for a fix and @sophiebits had one! Thank you!

[stephen-algeo]

@gaearon any ideas when this fix might make it into a release?

[stephen-algeo]

PS: We love the work you do for us all!