<h1 dir="auto">Feature request</h1>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">When I include a Typescript file from another package, I get this error:</p>
<p dir="auto"><code class="notranslate">You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders</code></p>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">I would like to be able to import Typescript files from other packages.</p>
<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">issues</a> of this repository for the phrase <code class="notranslate">renderError</code> and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Calling <code class="notranslate">app.renderError</code> should be straight-forward and render the default error page with the new code that I provide it. Full code is below (scroll down).</p>
<p dir="auto">I initially tried this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="return app.renderError(403, req, res, &quot;/progress&quot;, req.query);"><pre class="notranslate"><code class="notranslate">return app.renderError(403, req, res, "/progress", req.query);
</code></pre></div>
<p dir="auto">And then I realized that the first parameter is supposed to be an error object, so then I tried this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="res.statusCode = 403;
return app.renderError(null, req, res, &quot;/progress&quot;, req.query);"><pre class="notranslate"><code class="notranslate">res.statusCode = 403;
return app.renderError(null, req, res, "/progress", req.query);
</code></pre></div>
<p dir="auto">This should simply render the default error page from Next.js with my error code and not bounce to another page on the next ping.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Instead, what happens is that I see a brief glimpse of the expected error page with my 403 code in it, but on the next ping, it redirects to the <code class="notranslate">/progress</code> page but without an <code class="notranslate">id</code> param being passed down (because there isn't). Ideally, you should never see the <code class="notranslate">/progress</code> page if there is no id in the URL.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">This is the code that I used:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const express = require(&quot;express&quot;);
const next = require(&quot;next&quot;);

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== &quot;production&quot;;
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() =&gt; {
  const server = express();

  server.get(&quot;/progress/:id?&quot;, (req, res) =&gt; {
    if (!req.params.id) {
      console.log(&quot;no id submitted&quot;);
      res.statusCode = 403;
      return app.renderError(null, req, res, &quot;/progress&quot;, req.query);
    }
    const queryParams = Object.assign(req.query, req.params);
    return app.render(req, res, &quot;/progress&quot;, queryParams);
  });

  server.get(&quot;*&quot;, (req, res) =&gt; handle(req, res));

  server.listen(port, (err) =&gt; {
    if (err) throw err;
    console.log(`&gt; Ready on http://localhost:${port}`);
  });
});"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">express</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"express"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">next</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"next"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">port</span> <span class="pl-c1">=</span> <span class="pl-en">parseInt</span><span class="pl-kos">(</span><span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">PORT</span><span class="pl-kos">,</span> <span class="pl-c1">10</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-c1">3000</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">dev</span> <span class="pl-c1">=</span> <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">NODE_ENV</span> <span class="pl-c1">!==</span> <span class="pl-s">"production"</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">app</span> <span class="pl-c1">=</span> <span class="pl-s1">next</span><span class="pl-kos">(</span><span class="pl-kos">{</span> dev <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">handle</span> <span class="pl-c1">=</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">getRequestHandler</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">prepare</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-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">server</span> <span class="pl-c1">=</span> <span class="pl-s1">express</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-s1">server</span><span class="pl-kos">.</span><span class="pl-en">get</span><span class="pl-kos">(</span><span class="pl-s">"/progress/:id?"</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">req</span><span class="pl-kos">.</span><span class="pl-c1">params</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">)</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-s">"no id submitted"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-c1">statusCode</span> <span class="pl-c1">=</span> <span class="pl-c1">403</span><span class="pl-kos">;</span>
      <span class="pl-k">return</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">renderError</span><span class="pl-kos">(</span><span class="pl-c1">null</span><span class="pl-kos">,</span> <span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">,</span> <span class="pl-s">"/progress"</span><span class="pl-kos">,</span> <span class="pl-s1">req</span><span class="pl-kos">.</span><span class="pl-c1">query</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">queryParams</span> <span class="pl-c1">=</span> <span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">assign</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">.</span><span class="pl-c1">query</span><span class="pl-kos">,</span> <span class="pl-s1">req</span><span class="pl-kos">.</span><span class="pl-c1">params</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">,</span> <span class="pl-s">"/progress"</span><span class="pl-kos">,</span> <span class="pl-s1">queryParams</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">server</span><span class="pl-kos">.</span><span class="pl-en">get</span><span class="pl-kos">(</span><span class="pl-s">"*"</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">handle</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-s1">server</span><span class="pl-kos">.</span><span class="pl-en">listen</span><span class="pl-kos">(</span><span class="pl-s1">port</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">err</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">err</span><span class="pl-kos">)</span> <span class="pl-k">throw</span> <span class="pl-s1">err</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-s">`&gt; Ready on http://localhost:<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">port</span><span class="pl-kos">}</span></span>`</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></pre></div>
<ol dir="auto">
<li>Use the above code in a file <code class="notranslate">server.js</code>.</li>
<li>Run in dev mode by running a script that says <code class="notranslate">node server.js</code>.</li>
<li>Run <code class="notranslate">localhost:3000/progress/</code> (with no id in the path).</li>
<li>Note that you get the correct error page, but on subsequent ping it redirects to the <code class="notranslate">/progress</code> page but with no ID passed down in its props.</li>
</ol>
<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>3.0.6</td>
</tr>
<tr>
<td>node</td>
<td>8.4.0</td>
</tr>
</tbody>
</table>