<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">I have a monorepo usecase, where I want to share code between the next app and other modules that are located outside of the app folder.</p>
<p dir="auto">It will end up with this error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{ Error: (client) ../foo.ts 1:0
Module parse failed: The keyword 'interface' is reserved (1:0)
You may need an appropriate loader to handle this file type.
&gt; interface Foo {
|   prop: string;
| }
 @ ./pages/index.tsx 4:0-28 8:5-8
 @ multi ./pages/index.tsx"><pre class="notranslate"><code class="notranslate">{ Error: (client) ../foo.ts 1:0
Module parse failed: The keyword 'interface' is reserved (1:0)
You may need an appropriate loader to handle this file type.
&gt; interface Foo {
|   prop: string;
| }
 @ ./pages/index.tsx 4:0-28 8:5-8
 @ multi ./pages/index.tsx
</code></pre></div>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">I have set up a simple repo here, based on the <a class="issue-link js-issue-link notranslate" rel="noopener noreferrer nofollow" href="https://linear.app/vercel/issue/NEXT-typescript">next-typescript</a> example:</p>
<p dir="auto"><a href="https://github.com/Swatinem/next-monorepo/tree/master">https://github.com/Swatinem/next-monorepo/tree/master</a></p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Whatever I import should be transpiled like everything else, period.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: linux</li>
<li>Version of Next.js: next@7.0.2</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">Related issue (possibly a duplicate?): <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="346762684" data-permission-text="Title is private" data-url="https://github.com/vercel/next-plugins/issues/234" data-hovercard-type="issue" data-hovercard-url="/vercel/next-plugins/issues/234/hovercard" href="https://github.com/vercel/next-plugins/issues/234">vercel/next-plugins#234</a><br>
Also related maybe:</p>
<ul dir="auto">
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="199471918" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/706" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/706/hovercard" href="https://github.com/vercel/next.js/issues/706">#706</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="261800404" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/3018" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/3018/hovercard" href="https://github.com/vercel/next.js/issues/3018">#3018</a></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>