<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">Notice how <code class="notranslate">promise.then()</code> is called without a <code class="notranslate">.catch()</code>.</p>
<p dir="auto"><a href="https://github.com/zeit/next.js/blob/e093441bad588e98765a05df90f76f75283eda07/lib/dynamic.js#L56-L74">https://github.com/zeit/next.js/blob/e093441bad588e98765a05df90f76f75283eda07/lib/dynamic.js#L56-L74</a></p>
<p dir="auto">In my code I have this line:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const Foo = dynamic(import('./test'), {ssr: false})"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">Foo</span> <span class="pl-c1">=</span> <span class="pl-en">dynamic</span><span class="pl-kos">(</span><span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'./test'</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-c1">ssr</span>: <span class="pl-c1">false</span><span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">Which transpiles to this via the <code class="notranslate">handle-import</code> babel plugin:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var Foo = (0,
_dynamic.default)(new (__webpack_require__(&quot;../../../../../../../../../dev-live/next.js/dist/lib/dynamic.js&quot;).SameLoopPromise)(function(resolve, reject) {
  var weakId = /*require.resolve*/
  (&quot;./pages/test.js&quot;);

  try {
    var weakModule = __webpack_require__(weakId);

    return resolve(weakModule);
  } catch (err) {}

  __webpack_require__.e /* require.ensure */
  (5).then((function(require) {
    try {
      var m = __webpack_require__(&quot;./pages/test.js&quot;);

      m.__webpackChunkName = 'app_pages_test_57cb2b7894b1a841c4b5aa44c2077b83';
      resolve(m);
    } catch (error) {
      reject(error);
    }
  }
  ).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
}
), {
  ssr: false
});"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-v">Foo</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span>
<span class="pl-s1">_dynamic</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-k">new</span> <span class="pl-kos">(</span><span class="pl-en">__webpack_require__</span><span class="pl-kos">(</span><span class="pl-s">"../../../../../../../../../dev-live/next.js/dist/lib/dynamic.js"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">SameLoopPromise</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">resolve</span><span class="pl-kos">,</span> <span class="pl-s1">reject</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">var</span> <span class="pl-s1">weakId</span> <span class="pl-c1">=</span> <span class="pl-c">/*require.resolve*/</span>
  <span class="pl-kos">(</span><span class="pl-s">"./pages/test.js"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">try</span> <span class="pl-kos">{</span>
    <span class="pl-k">var</span> <span class="pl-s1">weakModule</span> <span class="pl-c1">=</span> <span class="pl-en">__webpack_require__</span><span class="pl-kos">(</span><span class="pl-s1">weakId</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">return</span> <span class="pl-s1">resolve</span><span class="pl-kos">(</span><span class="pl-s1">weakModule</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span> <span class="pl-k">catch</span> <span class="pl-kos">(</span><span class="pl-s1">err</span><span class="pl-kos">)</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>

  <span class="pl-s1">__webpack_require__</span><span class="pl-kos">.</span><span class="pl-en">e</span> <span class="pl-c">/* require.ensure */</span>
  <span class="pl-kos">(</span><span class="pl-c1">5</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-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">require</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">try</span> <span class="pl-kos">{</span>
      <span class="pl-k">var</span> <span class="pl-s1">m</span> <span class="pl-c1">=</span> <span class="pl-en">__webpack_require__</span><span class="pl-kos">(</span><span class="pl-s">"./pages/test.js"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

      <span class="pl-s1">m</span><span class="pl-kos">.</span><span class="pl-c1">__webpackChunkName</span> <span class="pl-c1">=</span> <span class="pl-s">'app_pages_test_57cb2b7894b1a841c4b5aa44c2077b83'</span><span class="pl-kos">;</span>
      <span class="pl-s1">resolve</span><span class="pl-kos">(</span><span class="pl-s1">m</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span> <span class="pl-k">catch</span> <span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-s1">reject</span><span class="pl-kos">(</span><span class="pl-s1">error</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-en">bind</span><span class="pl-kos">(</span><span class="pl-c1">null</span><span class="pl-kos">,</span> <span class="pl-s1">__webpack_require__</span><span class="pl-kos">)</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">__webpack_require__</span><span class="pl-kos">.</span><span class="pl-c1">oe</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-c1">ssr</span>: <span class="pl-c1">false</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Which cleaned up looks like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="dynamicComponent(new SameLoopPromise(cb), {ssr: false})

// NB: Not sure what 5 corresponds to...
cb = function(resolve, reject) {
  require.ensure(5).then(require =&gt; {
    try {
      require('./pages/test.js')
      resolve(m)
    } catch (error) {
      reject(error)
    }
  }).catch(__webpack_require__.oe)
}"><pre class="notranslate"><span class="pl-en">dynamicComponent</span><span class="pl-kos">(</span><span class="pl-k">new</span> <span class="pl-v">SameLoopPromise</span><span class="pl-kos">(</span><span class="pl-s1">cb</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-c1">ssr</span>: <span class="pl-c1">false</span><span class="pl-kos">}</span><span class="pl-kos">)</span>

<span class="pl-c">// NB: Not sure what 5 corresponds to...</span>
<span class="pl-en">cb</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">resolve</span><span class="pl-kos">,</span> <span class="pl-s1">reject</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">ensure</span><span class="pl-kos">(</span><span class="pl-c1">5</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-en">require</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">try</span> <span class="pl-kos">{</span>
      <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./pages/test.js'</span><span class="pl-kos">)</span>
      <span class="pl-s1">resolve</span><span class="pl-kos">(</span><span class="pl-s1">m</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span> <span class="pl-k">catch</span> <span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-s1">reject</span><span class="pl-kos">(</span><span class="pl-s1">error</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">catch</span><span class="pl-kos">(</span><span class="pl-s1">__webpack_require__</span><span class="pl-kos">.</span><span class="pl-c1">oe</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Now, if our <code class="notranslate">require</code> throws an error (e.g. <code class="notranslate">ReferenceError</code>):</p>
<ul dir="auto">
<li><code class="notranslate">reject</code> is called, but in <code class="notranslate">dynamicComponent#loadComponent()</code> as seen above, there is nothing to catch it.</li>
<li>Also, the <code class="notranslate">.catch(__webpack_require__.oe)</code> after <code class="notranslate">require.ensure</code> is never called either because our require is wrapped in its own <code class="notranslate">try catch</code>.</li>
</ul>
<h2 dir="auto">Solution</h2>
<p dir="auto">Add <code class="notranslate">}).catch(e =&gt; console.error(e))</code> at the end of <code class="notranslate">dynamicComponent#loadComponent()</code>.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>6.0.0</td>
</tr>
<tr>
<td>node</td>
<td>8.1.2</td>
</tr>
<tr>
<td>OS</td>
<td>macOS</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">None of my JavaScript gets loaded on the custom _error page in a production bundle, works fine in development though.</p>
<p dir="auto">There's also things on the _error page that are reused elsewhere in the application like a common header that has some JavaScript for letting a user log in/sign out.</p>
<p dir="auto">In the console I can see some errors saying the scripts can't be found.<br>
Is this normal behaviour that you simply can't run any JavaScript on the _error page? Is there any way to hack around this?</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="asdf:1 GET https://&lt;BASE_URL&gt;/_next/56777ac5-5382-4caf-9a49-e437db6e03a1/page/asdf.js net::ERR_ABORTED"><pre class="notranslate"><code class="notranslate">asdf:1 GET https://&lt;BASE_URL&gt;/_next/56777ac5-5382-4caf-9a49-e437db6e03a1/page/asdf.js net::ERR_ABORTED
</code></pre></div>

<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Create a custom _error.js page in the pages folder that's part of next's api</li>
<li>Go to a route that doesn't exist</li>
</ol>
<h2 dir="auto">Context</h2>

<p dir="auto">I was asked to implement a newsletter subscription form on the custom error page in order to give the user the ability to be notified as soon as a certain page exists because we have links that don't lead anywhere yet for a second stage of the project.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>4.2.3</td>
</tr>
<tr>
<td>node</td>
<td>9.5.0</td>
</tr>
<tr>
<td>OS</td>
<td>Mac OS X</td>
</tr>
<tr>
<td>Chrome</td>
<td>65.0.3325.181</td>
</tr>
</tbody>
</table>