<p dir="auto">Duplicate of : <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="398702542" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/14583" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/14583/hovercard" href="https://github.com/facebook/react/issues/14583">#14583</a></p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
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.</p>
<p dir="auto"><strong>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 (<a href="https://jsfiddle.net/Luktwrdm/" rel="nofollow">https://jsfiddle.net/Luktwrdm/</a>) or CodeSandbox (<a href="https://codesandbox.io/s/new" rel="nofollow">https://codesandbox.io/s/new</a>) example below:</strong></p>
<p dir="auto">We have a routes.js file with all the routes of the app. It looks like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const Organisation = lazy(() =&gt; import('./pages/Organisation'));
const Services = lazy(() =&gt; import('./pages/Services'));
// all the other dynamic imports go here
// ...
const Page404 = lazy(() =&gt; import('./pages/Page404'));


export default (
  &lt;ErrorBoundary&gt;
    &lt;Suspense fallback={&lt;span /&gt;}&gt;
      &lt;Switch&gt;
        &lt;Redirect exact from=&quot;/&quot; to=&quot;/organisation&quot; /&gt;
        &lt;Route path=&quot;/organisation&quot; component={Organisation} /&gt;
        &lt;Route path=&quot;/services&quot; component={Services} /&gt;
              &lt;!-- All the other routes --&gt;
        &lt;Route path=&quot;*&quot; component={Page404} /&gt;
      &lt;/Switch&gt;
    &lt;/Suspense&gt;
  &lt;/ErrorBoundary&gt;
);"><pre class="notranslate"><code class="notranslate">const Organisation = lazy(() =&gt; import('./pages/Organisation'));
const Services = lazy(() =&gt; import('./pages/Services'));
// all the other dynamic imports go here
// ...
const Page404 = lazy(() =&gt; import('./pages/Page404'));


export default (
  &lt;ErrorBoundary&gt;
    &lt;Suspense fallback={&lt;span /&gt;}&gt;
      &lt;Switch&gt;
        &lt;Redirect exact from="/" to="/organisation" /&gt;
        &lt;Route path="/organisation" component={Organisation} /&gt;
        &lt;Route path="/services" component={Services} /&gt;
              &lt;!-- All the other routes --&gt;
        &lt;Route path="*" component={Page404} /&gt;
      &lt;/Switch&gt;
    &lt;/Suspense&gt;
  &lt;/ErrorBoundary&gt;
);
</code></pre></div>
<p dir="auto">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.</p>
<p dir="auto">There are no shown errors at all.</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
The js chunks are requested on demand loaded and the components are rendered when we initially load the app.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">This worked in all previous version of React that we tried since Lazy and Suspense was released in 16.3.0</p>
<p dir="auto">React version: 16.7.0<br>
OS: Win7<br>
Browser: IE11</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
feature(maybe more like a discussion)</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
Assume that we have one custom hook:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/* Typing with TS */
// to make this example reasonable,
// assuming that `fetchUser` and `fetchOrders` fetch data from different backends. 
function useOrders(): Order[] {
  const [orders, setOrders] = useState&lt;Order[]&gt;([]);
  useEffect(() =&gt; {
    fetchUser().then(user =&gt;
      fetchOrders(user).then(theOrders =&gt; setOrders(theOrders)),
    );
  }, []);
  return orders;
}"><pre class="notranslate"><span class="pl-c">/* Typing with TS */</span>
<span class="pl-c">// to make this example reasonable,</span>
<span class="pl-c">// assuming that `fetchUser` and `fetchOrders` fetch data from different backends. </span>
<span class="pl-k">function</span> <span class="pl-en">useOrders</span><span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi">Order</span><span class="pl-kos">[</span><span class="pl-kos">]</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">orders</span><span class="pl-kos">,</span> <span class="pl-s1">setOrders</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">&lt;</span><span class="pl-smi">Order</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">&gt;</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-en">useEffect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-en">fetchUser</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-s1">user</span> <span class="pl-c1">=&gt;</span>
      <span class="pl-en">fetchOrders</span><span class="pl-kos">(</span><span class="pl-s1">user</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-s1">theOrders</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">setOrders</span><span class="pl-kos">(</span><span class="pl-s1">theOrders</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">return</span> <span class="pl-s1">orders</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">It works perfectly, but in other parts of application, I also need to fetch the <code class="notranslate">user</code> data, so I think I should split <code class="notranslate">useOrders</code> into two custom hooks to make the process of fetching user reusable:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/* Typing with TS */

// before the backend responsing, the returned user is `null`
function useUser(): User | null {
  const [user, setUser] = useState&lt;User | null&gt;(null);
  useEffect(() =&gt; {
    fetchUser().then(theUser =&gt; setUser(theUser));
  }, []);
  return user;
}

function useOrders(user: User): Order[] {
  const [orders, setOrders] = useState&lt;Order[]&gt;([]);
  useEffect(() =&gt; {
    fetchOrders(user).then(theOrders =&gt; setOrders(theOrders));
  }, [user]);
  return orders;
}"><pre class="notranslate"><span class="pl-c">/* Typing with TS */</span>

<span class="pl-c">// before the backend responsing, the returned user is `null`</span>
<span class="pl-k">function</span> <span class="pl-en">useUser</span><span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi">User</span> <span class="pl-c1">|</span> <span class="pl-c1">null</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">user</span><span class="pl-kos">,</span> <span class="pl-s1">setUser</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">&lt;</span><span class="pl-smi">User</span> <span class="pl-c1">|</span> <span class="pl-c1">null</span><span class="pl-kos">&gt;</span><span class="pl-kos">(</span><span class="pl-c1">null</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-en">useEffect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-en">fetchUser</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-s1">theUser</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">setUser</span><span class="pl-kos">(</span><span class="pl-s1">theUser</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">return</span> <span class="pl-s1">user</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">function</span> <span class="pl-en">useOrders</span><span class="pl-kos">(</span><span class="pl-s1">user</span>: <span class="pl-smi">User</span><span class="pl-kos">)</span>: <span class="pl-smi">Order</span><span class="pl-kos">[</span><span class="pl-kos">]</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">orders</span><span class="pl-kos">,</span> <span class="pl-s1">setOrders</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-en">useState</span><span class="pl-kos">&lt;</span><span class="pl-smi">Order</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">&gt;</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-en">useEffect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-en">fetchOrders</span><span class="pl-kos">(</span><span class="pl-s1">user</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-s1">theOrders</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">setOrders</span><span class="pl-kos">(</span><span class="pl-s1">theOrders</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">user</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">return</span> <span class="pl-s1">orders</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">But the two custom hooks can not work together properly:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function SomeComponent() {
  const user = useUser();
  // when user data is still fetching, the user will be null,
  // so the next line will throw error(typing and runtime)
  const orders = useOrders(user);
}"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-smi">SomeComponent</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">user</span> <span class="pl-c1">=</span> <span class="pl-en">useUser</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-c">// when user data is still fetching, the user will be null,</span>
  <span class="pl-c">// so the next line will throw error(typing and runtime)</span>
  <span class="pl-k">const</span> <span class="pl-s1">orders</span> <span class="pl-c1">=</span> <span class="pl-en">useOrders</span><span class="pl-kos">(</span><span class="pl-s1">user</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Maybe I can determin whether the <code class="notranslate">user</code> is <code class="notranslate">null</code> inside <code class="notranslate">useOrders</code>, but it is hard to explain the meaning of <code class="notranslate">useOrders(null)</code>. Why should <code class="notranslate">useOrders</code> accepts <code class="notranslate">null</code>?</p>
<p dir="auto">So my solution is to wrap the component:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function SomeComponent({ user }: { user: User }) {
  const orders = useOrders(user);
}

function Wrapper() {
  const user = useUser();
  if (user === null) {
    return null;
  }
  return &lt;SomeComponent user={user} /&gt;;
}

export default Wrapper;"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-smi">SomeComponent</span><span class="pl-kos">(</span><span class="pl-kos">{</span> user <span class="pl-kos">}</span>: <span class="pl-kos">{</span> <span class="pl-c1">user</span>: <span class="pl-smi">User</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">orders</span> <span class="pl-c1">=</span> <span class="pl-en">useOrders</span><span class="pl-kos">(</span><span class="pl-s1">user</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">function</span> <span class="pl-smi">Wrapper</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">user</span> <span class="pl-c1">=</span> <span class="pl-en">useUser</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">user</span> <span class="pl-c1">===</span> <span class="pl-c1">null</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-c1">null</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
  <span class="pl-k">return</span> <span class="pl-kos">&lt;</span><span class="pl-smi">SomeComponent</span><span class="pl-kos"></span> <span class="pl-s1">user</span><span class="pl-c1">=</span><span class="pl-kos">{</span>user<span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-smi">Wrapper</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I often fell into this hell when I tried to refactor existing code.</p>
<hr>
<p dir="auto"><strong>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 (<a href="https://jsfiddle.net/Luktwrdm/" rel="nofollow">https://jsfiddle.net/Luktwrdm/</a>) or CodeSandbox (<a href="https://codesandbox.io/s/new" rel="nofollow">https://codesandbox.io/s/new</a>) example below:</strong></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
I don't know, maybe a discussion is needed.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
React &gt;= 16.8.0<br>
any supported browsers</p>