<ul dir="auto">
<li>[x ] 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">I am getting the following error in my React / Next.js app:<br>
<em>Warning: Did not expect server HTML to contain a style in div.</em></p>
<p dir="auto">This affects the way the page is rendered, with a lot of content either not rendered or without styles. I have not been able to pinpoint the origin of this error and have tried different things, i.e. configuring the _document.js page.</p>
<p dir="auto">I get a "module not found" error whenever I try to import a file from a symlinked folder:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/943555/31979188-30f86246-b8fa-11e7-880f-47d34e3fa7d2.png"><img src="https://user-images.githubusercontent.com/943555/31979188-30f86246-b8fa-11e7-880f-47d34e3fa7d2.png" alt="screen shot 2017-10-24 at 8 29 57 pm" style="max-width: 100%;"></a></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">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Regardless of whether the folder is a symlink or not, the importing should work as if it was a normal folder.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">It cannot find the javascript file inside the symlink folder.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">I've made a small example here just to demonstrate the issue: <a href="https://github.com/adrianmcli/nextjs-symlink-bug">https://github.com/adrianmcli/nextjs-symlink-bug</a></p>
<p dir="auto">In order to reproduce this bug, clone the repo and run <code class="notranslate">yarn</code> or <code class="notranslate">npm install</code>, and then run <code class="notranslate">yarn dev</code> to run the app.</p>
<ol dir="auto">
<li>
<p dir="auto">Notice that <code class="notranslate">lib/symlink-folder</code> is a symlinked folder.</p>
</li>
<li>
<p dir="auto">Go into <code class="notranslate">pages/index.js</code> and notice that it currently refers to <code class="notranslate">lib/normal-folder</code>.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import someObj from '../lib/normal-folder/someText'"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">someObj</span> <span class="pl-k">from</span> <span class="pl-s">'../lib/normal-folder/someText'</span></pre></div>
</li>
<li>
<p dir="auto">Change that import statement to refer to <code class="notranslate">lib/symlink-folder</code> instead.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import someObj from '../lib/symlink-folder/someText'"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">someObj</span> <span class="pl-k">from</span> <span class="pl-s">'../lib/symlink-folder/someText'</span></pre></div>
</li>
<li>
<p dir="auto">Notice that the app gives you a <code class="notranslate">module not found</code> error.</p>
</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">I am trying to create a boilerplate project with Truffle and Next.js for some Dapp development. You can see my work-in-progress here: <a href="https://github.com/adrianmcli/truffle-next">https://github.com/adrianmcli/truffle-next</a></p>