<p dir="auto">When trying to achieve this <strong>import functionality</strong> according to atomic design:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { Button, Avatar, ...etc } from '~/components/atoms'"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Button</span><span class="pl-kos">,</span> <span class="pl-v">Avatar</span><span class="pl-kos">,</span> ...<span class="pl-s1">etc</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'~/components/atoms'</span></pre></div>
<p dir="auto">I use an <code class="notranslate">index.js</code> file @ <code class="notranslate">src/components/atoms/index.js</code> which contains this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const req = require.context(&quot;.&quot;, true, /\.\/[^/]+\/index\.js$/);

req.keys().forEach(key =&gt; {
  const componentName = key.replace(/^.+\/([^/]+)\/index\.js/, &quot;$1&quot;);
  module.exports[componentName] = req(key).default;
});"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">req</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">context</span><span class="pl-kos">(</span><span class="pl-s">"."</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span><span class="pl-cce">\/</span><span class="pl-kos">[</span>^/<span class="pl-kos">]</span><span class="pl-c1">+</span><span class="pl-cce">\/</span>index<span class="pl-cce">\.</span>js<span class="pl-cce">$</span><span class="pl-c1">/</span></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-en">keys</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-s1">key</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">componentName</span> <span class="pl-c1">=</span> <span class="pl-s1">key</span><span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">^</span>.<span class="pl-c1">+</span><span class="pl-cce">\/</span><span class="pl-kos">(</span><span class="pl-kos">[</span>^/<span class="pl-kos">]</span><span class="pl-c1">+</span><span class="pl-kos">)</span><span class="pl-cce">\/</span>index<span class="pl-cce">\.</span>js<span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-s">"$1"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span><span class="pl-kos">[</span><span class="pl-s1">componentName</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-s1">key</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>I know it looks crazy ha!</strong> All it does is go through all the components in the <code class="notranslate">src/components/atoms</code> dir and <strong>exports them</strong> so I don't have to do it manually (<em>because it gets annoyingly tedious when you have lots of components</em>) in the <code class="notranslate">index.js</code> file like:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import Button from &quot;./Button&quot;;
import Avatar from &quot;./Avatar&quot;;

export { Avatar, Button };"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">Button</span> <span class="pl-k">from</span> <span class="pl-s">"./Button"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">Avatar</span> <span class="pl-k">from</span> <span class="pl-s">"./Avatar"</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-kos">{</span> <span class="pl-v">Avatar</span><span class="pl-kos">,</span> <span class="pl-v">Button</span> <span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<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 and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">Here are some similar issues that deal with absolute imports: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="193357737" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/342" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/342/hovercard" href="https://github.com/vercel/next.js/issues/342">#342</a> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="199714403" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/714" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/714/hovercard" href="https://github.com/vercel/next.js/issues/714">#714</a></p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">I expect the components to resolve correctly.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">It is throwing a <code class="notranslate">TypeError: require.context is not a function</code> error.</p>
<p dir="auto">I expect this is due to the fact that <code class="notranslate">require.context</code> is <strong>not available in node</strong> because components are being server rendered.</p>
<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>2.0.0</td>
</tr>
<tr>
<td>node</td>
<td>9.1.0</td>
</tr>
<tr>
<td>OS</td>
<td>Ubuntu 17.10</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome  62</td>
</tr>
</tbody>
</table>
<p dir="auto">When using <code class="notranslate">&lt;Head&gt;</code> on a page, as well as specifying the <code class="notranslate">&lt;title&gt;</code> in <code class="notranslate">_document.js</code> inside <code class="notranslate">&lt;Head&gt;</code>, both create duplicate titles.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;head&gt;
  &lt;title class=&quot;next-head&quot;&gt;Homepage - Welcome&lt;/title&gt;
  &lt;meta charset=&quot;utf-8&quot; class=&quot;next-head&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, width=device-width&quot; class=&quot;next-head&gt;
  &lt;title&gt;Homepage&lt;/title&gt;
  &lt;link href=&quot;/static/styles/sanitize.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;/head&gt;"><pre class="notranslate"><code class="notranslate">&lt;head&gt;
  &lt;title class="next-head"&gt;Homepage - Welcome&lt;/title&gt;
  &lt;meta charset="utf-8" class="next-head"&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, width=device-width" class="next-head&gt;
  &lt;title&gt;Homepage&lt;/title&gt;
  &lt;link href="/static/styles/sanitize.css" rel="stylesheet"&gt;
&lt;/head&gt;
</code></pre></div>