<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">webpack's <code class="notranslate">config.resolve.alias</code> works different for initial landing and navigation. It seems to be ignored when landing on a page but used as expected when navigating to a page (via next/link).</p>
<p dir="auto">Edit: Difference is only observable for files inside <code class="notranslate">node_modules/</code></p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">See <a href="https://github.com/eps1lon/next-webpack-alias#steps-to-reproduce">https://github.com/eps1lon/next-webpack-alias#steps-to-reproduce</a></p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">aliases are used for initial landing as well. The idea for the implementation was taken from <a href="https://github.com/zeit/next.js/tree/canary/examples/with-absolute-imports">https://github.com/zeit/next.js/tree/canary/examples/with-absolute-imports</a></p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto">N/A</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: Ubuntu 18.04.2 LTS</li>
<li>Browser: Version 75.0.3770.80 (Official Build) (64-bit)</li>
<li>Version of Next.js: 8.1.0 and 9.0.2</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">The use case in the constructed repository is simpler than our actual use case but I believe that config.resolve.alias working differently in some cases is the root cause.</p>
<p dir="auto">We have docs and published packages living in a monorepo. Some of the npm packages used in our docs depend on our packages and want only a single version of our published packages in the docs bundle.</p>
<h2 dir="auto">Debug notes</h2>
<h3 dir="auto">why is resolve.alias ignored?</h3>
<p dir="auto"><code class="notranslate">.next/server/static/BUILD_ID/pages/*</code> uses standard <code class="notranslate">require</code> instead of inlining those modules. The node_modules/ are included via node's <code class="notranslate">require</code> at which point webpack's resolve.alias will no longer be of effect. This may be an issue with chunking? Should probably just disable it for static/BUILD_ID/pages</p>
<h3 dir="auto">fix iteration</h3>
<ul dir="auto">
<li>removing <code class="notranslate">externals</code> from the webpack config fixes the issue. Need to find out why all node_modules should be externals.</li>
</ul>
<p dir="auto">Now some of us ships NPM packages (specially components) written in ES2015 without transpiling them.</p>
<p dir="auto">That's a pretty good thing specially if they are gonna used in a project like Next.js or CRA (which does transpiling). They offer benefits like:</p>
<ul dir="auto">
<li>No need to transpile before shipping to NPM</li>
<li>Get the benefit of Webpack 2's tree-shaking</li>
</ul>
<p dir="auto">But we can't do this now we <a href="https://github.com/zeit/next.js/blob/master/server/build/webpack.js#L166">exclude</a> everything inside node_modules from babel transpiling.</p>
<p dir="auto">So, here's the proposed solution.</p>
<p dir="auto">We have an entry in <code class="notranslate">next.config.js</code> to include modules which needs to go through babel. See:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = {
   transpileModules: [
     &quot;my-component&quot;,
     &quot;redux/src&quot;
   ]
}"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
   <span class="pl-c1">transpileModules</span>: <span class="pl-kos">[</span>
     <span class="pl-s">"my-component"</span><span class="pl-kos">,</span>
     <span class="pl-s">"redux/src"</span>
   <span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>