<p dir="auto">It looks like webpack try to bundle all of server side dependencies, so it can't find module <code class="notranslate">fs</code>.</p>



<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?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto"><code class="notranslate">dotenv</code> in <code class="notranslate">_document</code> works with Next.js v6.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">After upgrading from v5 to v6, it throws error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="This dependency was not found:

* fs in ./node_modules/dotenv/lib/main.js

To install it, you can run: npm install --save fs
(node:6389) DeprecationWarning: Module.chunks: Use Module.forEachChunk/mapChunks/getNumberOfChunks/isInChunk/addChunk/removeChunk instead
Client on: http://localhost:3000/projects"><pre class="notranslate"><code class="notranslate">This dependency was not found:

* fs in ./node_modules/dotenv/lib/main.js

To install it, you can run: npm install --save fs
(node:6389) DeprecationWarning: Module.chunks: Use Module.forEachChunk/mapChunks/getNumberOfChunks/isInChunk/addChunk/removeChunk instead
Client on: http://localhost:3000/projects
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>use <code class="notranslate">dotenv</code> in <code class="notranslate">_doucment</code></li>
<li>upgrade to Next.js v6</li>
</ol>
<h2 dir="auto">Context</h2>


<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>v6.6.0</td>
</tr>
<tr>
<td>node</td>
<td>v9.11.1</td>
</tr>
<tr>
<td>OS</td>
<td>macos 10.13.4</td>
</tr>
<tr>
<td>browser</td>
<td></td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">I'm trying to rely on multiple &lt;style jsx global&gt; to be ordered correctly. E.g.:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;GlobalStyle /&gt;
&lt;BlogStyle /&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">GlobalStyle</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-v">BlogStyle</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">Where I'd like BlogStyle to tweak stuff like body background image and text color. But it looks like tags get ordered certain way irrespective of their order in the component (probably based on the hash?).</p>
<p dir="auto">If "I'm doing it wrong", then how would you adjust body bg image, color, default text and link color for a specific page (e.g. dark zeit home page vs white blog)? Without having to duplicate all of the global styles into 2 js modules.</p>
<p dir="auto">E.g. I'd be ok with adding a class to , but not sure how to do that from within the <code class="notranslate">&lt;BlogLayout /&gt;</code> component.</p>