<p dir="auto">i can build and run the app fine locally but when i try deploying to heroku i get this</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="remote: -----&gt; Building dependencies        
remote:        Installing node modules (yarn.lock)        
remote:        yarn install v0.24.6        
remote:        [1/4] Resolving packages...        
remote:        [2/4] Fetching packages...        
remote:        warning fsevents@1.1.1: The platform &quot;linux&quot; is incompatible with this module.        
remote:        info &quot;fsevents@1.1.1&quot; is an optional dependency and failed compatibility check. Excluding it from installation.        
remote:        [3/4] Linking dependencies...        
remote:        [4/4] Building fresh packages...        
remote:        success Saved lockfile.        
remote:        Done in 22.04s.        
remote:        Running heroku-postbuild (yarn)        
remote:        yarn run v0.24.6        
remote:        $ next build        
remote:        &gt; Using &quot;webpack&quot; config function defined in next.config.js.        
remote: &gt; Failed to build on /tmp/4d8f2909-b5b6-41d7-8a6e-4b7b28b4b1d1        
remote: { Error: ./pages/filters.js?entry        
remote: Module not found: Error: Can't resolve '../components/layout/Main' in '/tmp/build_92a0c5ebe560c66f11f50502989153c7/pages'        
remote: resolve '../components/layout/Main' in '/tmp/build_92a0c5ebe560c66f11f50502989153c7/pages'        
remote:   using description file: /tmp/build_92a0c5ebe560c66f11f50502989153c7/package.json (relative path: ./pages)        
remote:     Field 'browser' doesn't contain a valid alias configuration        
remote:   after using description file: /tmp/build_92a0c5ebe560c66f11f50502989153c7/package.json (relative path: ./pages)        
remote:     using description file: /tmp/build_92a0c5ebe560c66f11f50502989153c7/package.json (relative path: ./components/layout/Main)        
remote:       no extension        
remote:         Field 'browser' doesn't contain a valid alias configuration        
remote:         /tmp/build_92a0c5ebe560c66f11f50502989153c7/components/layout/Main doesn't exist        
remote:       .js        
remote:         Field 'browser' doesn't contain a valid alias configuration        
remote:         /tmp/build_92a0c5ebe560c66f11f50502989153c7/components/layout/Main.js doesn't exist        
remote:       .json        
remote:         Field 'browser' doesn't contain a valid alias configuration        
remote:         /tmp/build_92a0c5ebe560c66f11f50502989153c7/components/layout/Main.json doesn't exist        
remote:       as directory        
remote:         /tmp/build_92a0c5ebe560c66f11f50502989153c7/components/layout/Main doesn't exist        
remote: [/tmp/build_92a0c5ebe560c66f11f50502989153c7/components/layout/Main]        
remote: [/tmp/build_92a0c5ebe560c66f11f50502989153c7/components/layout/Main.js] "><pre class="notranslate">remote: -----<span class="pl-k">&gt;</span> Building dependencies        
remote:        Installing node modules (yarn.lock)        
remote:        yarn install v0.24.6        
remote:        [1/4] Resolving packages...        
remote:        [2/4] Fetching packages...        
remote:        warning fsevents@1.1.1: The platform <span class="pl-s"><span class="pl-pds">"</span>linux<span class="pl-pds">"</span></span> is incompatible with this module.        
remote:        info <span class="pl-s"><span class="pl-pds">"</span>fsevents@1.1.1<span class="pl-pds">"</span></span> is an optional dependency and failed compatibility check. Excluding it from installation.        
remote:        [3/4] Linking dependencies...        
remote:        [4/4] Building fresh packages...        
remote:        success Saved lockfile.        
remote:        Done <span class="pl-k">in</span> 22.04s.        
remote:        Running heroku-postbuild (yarn)        
remote:        yarn run v0.24.6        
remote:        $ next build        
remote:        <span class="pl-k">&gt;</span> Using <span class="pl-s"><span class="pl-pds">"</span>webpack<span class="pl-pds">"</span></span> config <span class="pl-k">function</span> <span class="pl-en">defined</span> <span class="pl-k">in</span> next.config.js.        
remote: <span class="pl-k">&gt;</span> Failed to build on /tmp/4d8f2909-b5b6-41d7-8a6e-4b7b28b4b1d1        
remote: { Error: ./pages/filters.js<span class="pl-k">?</span>entry        
remote: Module not found: Error: Can<span class="pl-s"><span class="pl-pds">'</span>t resolve <span class="pl-pds">'</span></span>../components/layout/Main<span class="pl-s"><span class="pl-pds">'</span> in <span class="pl-pds">'</span></span>/tmp/build_92a0c5ebe560c66f11f50502989153c7/pages<span class="pl-s"><span class="pl-pds">'</span>        </span>
<span class="pl-s">remote: resolve <span class="pl-pds">'</span></span>../components/layout/Main<span class="pl-s"><span class="pl-pds">'</span> in <span class="pl-pds">'</span></span>/tmp/build_92a0c5ebe560c66f11f50502989153c7/pages<span class="pl-s"><span class="pl-pds">'</span>        </span>
<span class="pl-s">remote:   using description file: /tmp/build_92a0c5ebe560c66f11f50502989153c7/package.json (relative path: ./pages)        </span>
<span class="pl-s">remote:     Field <span class="pl-pds">'</span></span>browser<span class="pl-s"><span class="pl-pds">'</span> doesn<span class="pl-pds">'</span></span>t contain a valid <span class="pl-c1">alias</span> configuration        
remote:   after using description file: /tmp/build_92a0c5ebe560c66f11f50502989153c7/package.json (relative path: ./pages)        
remote:     using description file: /tmp/build_92a0c5ebe560c66f11f50502989153c7/package.json (relative path: ./components/layout/Main)        
remote:       no extension        
remote:         Field <span class="pl-s"><span class="pl-pds">'</span>browser<span class="pl-pds">'</span></span> doesn<span class="pl-s"><span class="pl-pds">'</span>t contain a valid alias configuration        </span>
<span class="pl-s">remote:         /tmp/build_92a0c5ebe560c66f11f50502989153c7/components/layout/Main doesn<span class="pl-pds">'</span></span>t exist        
remote:       .js        
remote:         Field <span class="pl-s"><span class="pl-pds">'</span>browser<span class="pl-pds">'</span></span> doesn<span class="pl-s"><span class="pl-pds">'</span>t contain a valid alias configuration        </span>
<span class="pl-s">remote:         /tmp/build_92a0c5ebe560c66f11f50502989153c7/components/layout/Main.js doesn<span class="pl-pds">'</span></span>t exist        
remote:       .json        
remote:         Field <span class="pl-s"><span class="pl-pds">'</span>browser<span class="pl-pds">'</span></span> doesn<span class="pl-s"><span class="pl-pds">'</span>t contain a valid alias configuration        </span>
<span class="pl-s">remote:         /tmp/build_92a0c5ebe560c66f11f50502989153c7/components/layout/Main.json doesn<span class="pl-pds">'</span></span>t exist        
remote:       as directory        
remote:         /tmp/build_92a0c5ebe560c66f11f50502989153c7/components/layout/Main doesn<span class="pl-s"><span class="pl-pds">'</span>t exist        </span>
<span class="pl-s">remote: [/tmp/build_92a0c5ebe560c66f11f50502989153c7/components/layout/Main]        </span>
<span class="pl-s">remote: [/tmp/build_92a0c5ebe560c66f11f50502989153c7/components/layout/Main.js] </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>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">when i run it locally</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="yarn run v0.24.6
$ next build
&gt; Using &quot;webpack&quot; config function defined in next.config.js.
Done in 28.74s."><pre class="notranslate">yarn run v0.24.6
$ next build
<span class="pl-k">&gt;</span> Using <span class="pl-s"><span class="pl-pds">"</span>webpack<span class="pl-pds">"</span></span> config <span class="pl-k">function</span> <span class="pl-en">defined</span> <span class="pl-k">in</span> next.config.js.
Done <span class="pl-k">in</span> 28.74s.</pre></div>
<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>beta</td>
</tr>
<tr>
<td>node</td>
<td>7.10.1</td>
</tr>
<tr>
<td>OS</td>
<td>Win 10</td>
</tr>
</tbody>
</table>
<h1 dir="auto">Bug report</h1>
<p dir="auto"><strong>Edit +++ ON HOLD</strong> I just had a lightbulb moment. I will post my discovery/misunderstanding in the next few hours. This ticket can probably be closed then, but I have to test my new theory first…</p>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">Multiple (duplicate) meta tags such as <code class="notranslate">charSet</code> and <code class="notranslate">viewport</code> are rendered in <code class="notranslate">&lt;head&gt;</code> section of the HTML output when the <code class="notranslate">&lt;Head&gt;</code> component is used in both a custom <code class="notranslate">_document</code> and a page file.</p>
<p dir="auto">Even relying on the default injection of <code class="notranslate">&lt;meta charSet="utf-8"/&gt;</code> (i.e. not specifying that tag at all) results in having two of the same tags in the output HTML, one from Document and one from the page.</p>
<p dir="auto">I also end up with two <code class="notranslate">viewport</code> meta tags, one from Document and one from the page.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">I have created (failing) tests here: <a href="https://github.com/Manc/next.js/tree/test-head-document">https://github.com/Manc/next.js/tree/test-head-document</a></p>
<ol dir="auto">
<li>Clone repository <code class="notranslate">git@github.com:Manc/next.js.git</code></li>
<li>Check out branch <code class="notranslate">test-head-document</code></li>
<li><code class="notranslate">yarn install</code></li>
<li><code class="notranslate">yarn testonly --testPathPattern "app-document" -t "It dedupes head tags with the same key"</code></li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">I expect the meta tags with the same <code class="notranslate">key</code> to override the meta tags from the custom Document (<code class="notranslate">_document</code>).</p>
<p dir="auto">I expect only to have one <code class="notranslate">charset</code> and one <code class="notranslate">viewport</code> tag in the whole rendered HTML.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOS</li>
<li>Version of Next.js: latest or <code class="notranslate">canary</code> branch</li>
</ul>
<h2 dir="auto">Other</h2>
<p dir="auto">I'm pretty new to Next.js and don't really know how it all works yet. I hope the test I provided helps somebody more experienced to fix this or maybe give me a hint. Thanks!</p>
<p dir="auto">My suspicion is that the <code class="notranslate">Head</code> component of the Document (<code class="notranslate">import { Head } from 'next/document'</code>) and the <code class="notranslate">Head</code> component used in the page (<code class="notranslate">import Head from 'next/head'</code>) might be completely separate and don't "communicate" with each other, each doing their own thing twice.</p>