<h1 dir="auto">Bug report</h1>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">I'm working on reproducing, but next.js provides zero information about what's happening, so it's nearly impossible for me to actually identify where the problem is. All I know is that my code isn't working.</p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Clicking this component should redirect to the about page.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;Link href=&quot;/about&quot;&gt;About&lt;/Link&gt;"><pre class="notranslate"><code class="notranslate">&lt;Link href="/about"&gt;About&lt;/Link&gt;
</code></pre></div>
<p dir="auto">A meta issue: If it does not redirect to the about page, next.js should provide some debug output to explain why it's not working. It's hard to isolate a bug when the entire HMR system is blackboxed.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>macOS</li>
<li>chrome</li>
<li>Next.js v 8.0.0</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">I'm using a custom server and clean routes. The clean route pages do load properly, but the other pages in the "/pages" directory do not load properly. If I navigate directly to the url (eg. /about), the About page does load.</p>
<p dir="auto">This might be related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="411073451" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/6317" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/6317/hovercard" href="https://github.com/vercel/next.js/issues/6317">#6317</a> and <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="416024811" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/6497" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/6497/hovercard" href="https://github.com/vercel/next.js/issues/6497">#6497</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const app = next({
  dev,
  dir:'./src'
})"><pre class="notranslate"><code class="notranslate">const app = next({
  dev,
  dir:'./src'
})
</code></pre></div>

<ul dir="auto">
<li>[ x] I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">It should load all the plugins in my .babelrc. It seems like it doesn't load my .babelrc and doesn't load the presets/</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto"><code class="notranslate">You may need an appropriate loader to handle this file type. |   layout | }) =&gt; ( |   &lt;div&gt; |     &lt;Container&gt; |       &lt;TextContainer&gt;</code></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Create a custom server and a custom .babelrc</li>
<li>Config a custom dir like:</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const app = next({
  dev,
  dir:'./src'
})"><pre class="notranslate"><code class="notranslate">const app = next({
  dev,
  dir:'./src'
})
</code></pre></div>
<ol start="3" dir="auto">
<li>run server</li>
</ol>