Js chunks are not requested on demand on IE11 with the latest react version 16.7.0

[carlosparreno]

Duplicate of : #14583

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

What is the current behavior?
Issue loading the js chunk files on IE11 (only). With the latest version of react 16.7.0 our app (which uses Suspense and Lazy) doesn't load all the needed js chunks. You need to navigate around the app to request other js chunks and eventually the app is fully loaded.

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:

We have a routes.js file with all the routes of the app. It looks like this:

const Organisation = lazy(() => import('./pages/Organisation'));
const Services = lazy(() => import('./pages/Services'));
// all the other dynamic imports go here
// ...
const Page404 = lazy(() => import('./pages/Page404'));


export default (
  <ErrorBoundary>
    <Suspense fallback={<span />}>
      <Switch>
        <Redirect exact from="/" to="/organisation" />
        <Route path="/organisation" component={Organisation} />
        <Route path="/services" component={Services} />
              <!-- All the other routes -->
        <Route path="*" component={Page404} />
      </Switch>
    </Suspense>
  </ErrorBoundary>
);

The route "/" is redirected to "/organisation" which returns the "Organisation" component. However, the Organisation component is not rendered, the chunk hasn't been requested on demand. If we navigate to "/services" the services chunk is requested on demand and loaded well. Then, if we go back to "/organisation" all is fine.

There are no shown errors at all.

What is the expected behavior?
The js chunks are requested on demand loaded and the components are rendered when we initially load the app.

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

This worked in all previous version of React that we tried since Lazy and Suspense was released in 16.3.0

React version: 16.7.0
OS: Win7
Browser: IE11

[gaearon]

We'll need a reproducing case to help with this. Ideally it would be great if you could reduce this to something that doesn't involve chunks. React doesn't do anything special with chunks — it triggers the Promise factory you pass, and waits for that Promise to resolve. So if there is a problem, it should be reproducible even with fake Promises that don't actually represent any loading states.

since Lazy and Suspense was released in 16.3.0

They were released in 16.6.0.

[threepointone]

@cparreno7 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!

[gaearon]

Note 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

Judging by #14583, you might bump into this issue if you don't have a Set polyfill. If it's unrelated please reopen with a repro example and we'll look.

[carlosparreno]

Hi @gaearon and @threepointone, thanks a lot for your help, I didn't have a chance to look a this yesterday and I couldn't provide the requested reproducing case. I will straight away next time!

After reading #14583, I could verify that my issue was the same. The React.Suspense fallback rendered instead of the requested component in IE 11. This was also due to the missing polyfills required by React 16. After adding them all was fine 👍.

Thanks again guys!!