<p dir="auto">When using the <code class="notranslate">baseUrl</code> property in<code class="notranslate">tsconfig.json</code>, Next 9 fails to build with the following error:<br>
<code class="notranslate">Module not found: Can't resolve ...</code></p>
<p dir="auto">This is resolved by updating the import path to be absolute.</p>
<p dir="auto">When running <code class="notranslate">tsc</code> on the same directory, the relative import works.</p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">The <code class="notranslate">baseUrl</code> in <code class="notranslate">tsconfig.json</code> is used when running <code class="notranslate">next build</code></p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Update tsconfig to use <code class="notranslate">baseUrl</code> compiler option:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;compilerOptions&quot;: {
    &quot;target&quot;: &quot;es5&quot;,
    &quot;lib&quot;: [&quot;dom&quot;, &quot;dom.iterable&quot;, &quot;esnext&quot;],
    &quot;allowJs&quot;: true,
    &quot;skipLibCheck&quot;: true,
    &quot;strict&quot;: true,
    &quot;forceConsistentCasingInFileNames&quot;: true,
    &quot;noEmit&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;module&quot;: &quot;esnext&quot;,
    &quot;moduleResolution&quot;: &quot;node&quot;,
    &quot;resolveJsonModule&quot;: true,
    &quot;isolatedModules&quot;: true,
    &quot;jsx&quot;: &quot;preserve&quot;,
    &quot;baseUrl&quot;: &quot;.&quot;
  },
  &quot;exclude&quot;: [&quot;node_modules&quot;],
  &quot;include&quot;: [&quot;next-env.d.ts&quot;, &quot;**/*.ts&quot;, &quot;**/*.tsx&quot;]
}"><pre class="notranslate">{
  <span class="pl-ent">"compilerOptions"</span>: {
    <span class="pl-ent">"target"</span>: <span class="pl-s"><span class="pl-pds">"</span>es5<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"lib"</span>: [<span class="pl-s"><span class="pl-pds">"</span>dom<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>dom.iterable<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>esnext<span class="pl-pds">"</span></span>],
    <span class="pl-ent">"allowJs"</span>: <span class="pl-c1">true</span>,
    <span class="pl-ent">"skipLibCheck"</span>: <span class="pl-c1">true</span>,
    <span class="pl-ent">"strict"</span>: <span class="pl-c1">true</span>,
    <span class="pl-ent">"forceConsistentCasingInFileNames"</span>: <span class="pl-c1">true</span>,
    <span class="pl-ent">"noEmit"</span>: <span class="pl-c1">true</span>,
    <span class="pl-ent">"esModuleInterop"</span>: <span class="pl-c1">true</span>,
    <span class="pl-ent">"module"</span>: <span class="pl-s"><span class="pl-pds">"</span>esnext<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"moduleResolution"</span>: <span class="pl-s"><span class="pl-pds">"</span>node<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"resolveJsonModule"</span>: <span class="pl-c1">true</span>,
    <span class="pl-ent">"isolatedModules"</span>: <span class="pl-c1">true</span>,
    <span class="pl-ent">"jsx"</span>: <span class="pl-s"><span class="pl-pds">"</span>preserve<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"baseUrl"</span>: <span class="pl-s"><span class="pl-pds">"</span>.<span class="pl-pds">"</span></span>
  },
  <span class="pl-ent">"exclude"</span>: [<span class="pl-s"><span class="pl-pds">"</span>node_modules<span class="pl-pds">"</span></span>],
  <span class="pl-ent">"include"</span>: [<span class="pl-s"><span class="pl-pds">"</span>next-env.d.ts<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>**/*.ts<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>**/*.tsx<span class="pl-pds">"</span></span>]
}</pre></div>
<p dir="auto">Assuming a directory structure of:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="components
  |--&gt; Layout.tsx
pages
  |--&gt; index.tsx"><pre class="notranslate"><code class="notranslate">components
  |--&gt; Layout.tsx
pages
  |--&gt; index.tsx
</code></pre></div>
<p dir="auto">Import file using relative path:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  // pages/index.js
  import Layout from 'components/layout'

  export default (props) =&gt; &lt;Layout&gt;Welcome!&lt;/Layout&gt;"><pre class="notranslate">  <span class="pl-c">// pages/index.js</span>
  <span class="pl-k">import</span> <span class="pl-v">Layout</span> <span class="pl-k">from</span> <span class="pl-s">'components/layout'</span>

  <span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">Layout</span><span class="pl-c1">&gt;</span>Welcome!<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Layout</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">package.json</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;dependencies&quot;: {
    &quot;next&quot;: &quot;^9.0.0&quot;,
    &quot;react&quot;: &quot;^16.8.6&quot;,
    &quot;react-dom&quot;: &quot;^16.8.6&quot;,
  },
&quot;devDependencies&quot;: {
   &quot;typescript&quot;: &quot;^3.5.3&quot;
}"><pre class="notranslate"><span class="pl-ent">"dependencies"</span>: {
    <span class="pl-ent">"next"</span>: <span class="pl-s"><span class="pl-pds">"</span>^9.0.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react"</span>: <span class="pl-s"><span class="pl-pds">"</span>^16.8.6<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react-dom"</span>: <span class="pl-s"><span class="pl-pds">"</span>^16.8.6<span class="pl-pds">"</span></span>,
  },
<span class="pl-ent">"devDependencies"</span>: {
   <span class="pl-ent">"typescript"</span>: <span class="pl-s"><span class="pl-pds">"</span>^3.5.3<span class="pl-pds">"</span></span>
}</pre></div>
<h2 dir="auto">Question</h2>
<p dir="auto">I create a simple React Context to test the React Context API but it seems that is doesn't work as expected or I'm doing something wrong.</p>
<p dir="auto">TestContext</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react';
export default React.createContext(true);"><pre class="notranslate"><code class="notranslate">import React from 'react';
export default React.createContext(true);
</code></pre></div>
<p dir="auto">in _app.js</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import TestContext from './TestContext';
...
render(){
....
 &lt;TestContext.Provider value={false}&gt;
     &lt;Component pageContext={this.pageContext} {...pageProps} /&gt;
 &lt;/TestContext.Provider&gt;
}"><pre class="notranslate"><code class="notranslate">import TestContext from './TestContext';
...
render(){
....
 &lt;TestContext.Provider value={false}&gt;
     &lt;Component pageContext={this.pageContext} {...pageProps} /&gt;
 &lt;/TestContext.Provider&gt;
}
</code></pre></div>
<p dir="auto">inside a page:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="render() {
        return (
            &lt;TestContext.Consumer&gt;
                {isTrue =&gt; isTrue ? 'true' : 'false'}
            &lt;/TestContext.Consumer&gt;
        );
    }"><pre class="notranslate"><code class="notranslate">render() {
        return (
            &lt;TestContext.Consumer&gt;
                {isTrue =&gt; isTrue ? 'true' : 'false'}
            &lt;/TestContext.Consumer&gt;
        );
    }
</code></pre></div>
<p dir="auto"><strong>output</strong>: true</p>