<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>
Sometimes, Webpack generates code that contains Promises that are not rejectable. If an error is thrown in those Promise's body, the Promise is not rejected and thus the error bubbles up to the console, uncatched.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
Let's lazy-load some module based on the value of an input field (a real world use-case would be a SPA that loads modules based on the current route)...</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
let input = document.createElement('input');

document.body.appendChild(input);
input.addEventListener('change', function(){
    let path;
    path = input.value;
    
    import(`${path}`)
        .then(module =&gt; document.body.innerText = module.default)
        .catch(reason =&gt; {console.log(reason); /* go to 404 maybe... */})
})
"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">input</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">'input'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">input</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">input</span><span class="pl-kos">.</span><span class="pl-en">addEventListener</span><span class="pl-kos">(</span><span class="pl-s">'change'</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
    <span class="pl-k">let</span> <span class="pl-s1">path</span><span class="pl-kos">;</span>
    <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-s1">input</span><span class="pl-kos">.</span><span class="pl-c1">value</span><span class="pl-kos">;</span>
    
    <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">path</span><span class="pl-kos">}</span></span>`</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-smi">module</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">.</span><span class="pl-c1">innerText</span> <span class="pl-c1">=</span> <span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">)</span>
        <span class="pl-kos">.</span><span class="pl-en">catch</span><span class="pl-kos">(</span><span class="pl-s1">reason</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span><span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">reason</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">/* go to 404 maybe... */</span><span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">if the value of the input field is not a valid module path, it throws.<br>
It would be nice and clean to let developer decide whether or not to catch that exception.<br>
If the developer doesn't catch it, it will naturally bubble up to the console. That's the expected behaviour of promises, anyway.</p>



<p dir="auto"><strong>What is the expected behavior?</strong><br>
If a Promise is rejected it should be catchable.</p>
<p dir="auto"><strong>If this is a feature request, what is motivation or use case for changing the behavior?</strong><br>
When working with Promises the developer should be in control about whether or not to catch the possible exception.</p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.</strong></p>
<p dir="auto">Node: 6.11.3<br>
Webpack 3.5.6<br>
OS: Windows 10</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>
Currently, if you dynamically call the import function and you are offline, the catch function is never called. Webpack generates an uncaught exception.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import('./my-component')
  .then(module =&gt; {})
  .catch(err =&gt; console.log(err)"><pre class="notranslate"><code class="notranslate">import('./my-component')
  .then(module =&gt; {})
  .catch(err =&gt; console.log(err)
</code></pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
Step 1)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="window.loadChunk = () =&gt; {
  import('./my-component')
    .then(module =&gt; {})
    .catch(err =&gt; console.log(err))
}"><pre class="notranslate"><code class="notranslate">window.loadChunk = () =&gt; {
  import('./my-component')
    .then(module =&gt; {})
    .catch(err =&gt; console.log(err))
}
</code></pre></div>
<p dir="auto">Step 2)<br>
Load the bundle on the page, you should now have available <code class="notranslate">loadChunk</code> function</p>
<p dir="auto">Step 3)<br>
Put your browser in "offline mode"</p>
<p dir="auto">Step 4)<br>
call the <code class="notranslate">loadChunk()</code> function</p>



<p dir="auto"><strong>What is the expected behavior?</strong><br>
Expected behavior is that the <code class="notranslate">catch</code> function is called and error logged.</p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.</strong><br>
Using: Webpack v<em>3.3.0</em><br>
This happens because the <code class="notranslate">import</code> function is converted into a Promise that wraps the <code class="notranslate">require.ensure</code>. Any time the require.ensure rejects the promise, it automatically calls the ensure's OnError callback which throws an exception. Async exceptions are not caught by the parent Promise, resulting in the bug above.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// var prom = import('./my-component)
var prom = new Promise(function (resolve) {
  __webpack_require__.e/* require.ensure */(1).then((function (require) {
    resolve(__webpack_require__( /* webpackChunkName: &quot;my-component&quot; */697));
  }).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
});

// __webpack_require__.oe (On Error)
__webpack_require__.oe = function(err) { console.error(err); throw err; };"><pre class="notranslate"><code class="notranslate">// var prom = import('./my-component)
var prom = new Promise(function (resolve) {
  __webpack_require__.e/* require.ensure */(1).then((function (require) {
    resolve(__webpack_require__( /* webpackChunkName: "my-component" */697));
  }).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
});

// __webpack_require__.oe (On Error)
__webpack_require__.oe = function(err) { console.error(err); throw err; };
</code></pre></div>
<p dir="auto">Please let me know if I'm missing something, maybe in the configuration, or if this is really a bug.</p>