<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"><code class="notranslate">styled-components</code> should not result in the <code class="notranslate">className</code> mismatch warning from React.</p>
<h2 dir="auto">Current Behavior</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Warning: Prop `className` did not match. Server: &quot;Header-johx6c-0 bHIeEO&quot; Client: &quot;Header___default-johx6c-0 gGUBlx&quot;"><pre class="notranslate"><code class="notranslate">Warning: Prop `className` did not match. Server: "Header-johx6c-0 bHIeEO" Client: "Header___default-johx6c-0 gGUBlx"
</code></pre></div>
<p dir="auto">I'm exporting the header component like so:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export default styled(Header)`
  text-align: center;
`;"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-en">styled</span><span class="pl-kos">(</span><span class="pl-v">Header</span><span class="pl-kos">)</span><span class="pl-s">`</span>
<span class="pl-s">  text-align: center;</span>
<span class="pl-s">`</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Notice that <code class="notranslate">styled-components</code> uses the name <code class="notranslate">Header</code> on the server and <code class="notranslate">Header__default</code> on the client. This doesn't happen with Next.js 4, so I assume it has something to do with the way modules are built with the new Universal Webpack setup.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Use <code class="notranslate">styled-components</code> with <code class="notranslate">next</code> v5.</li>
<li>Use <code class="notranslate">babel-plugin-styled-components</code> with the default <code class="notranslate">displayName</code> setting.</li>
<li>Render a component exported like: <code class="notranslate">export default styled(Component)</code></li>
</ol>
<p dir="auto">(It doesn't matter what the Babel plugin's <code class="notranslate">ssr</code> setting is, nor if the server stylesheet is set up in <code class="notranslate">_document.js</code>. Same thing in every combination.)</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>v5.0.0</td>
</tr>
<tr>
<td>node</td>
<td>v8.9.4</td>
</tr>
<tr>
<td>OS</td>
<td>macOS</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
</tbody>
</table>
<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">I am trying to host Next.js on AWS Lambda/CloudFormation. (using <a href="https://github.com/serverless/serverless">Serverless</a>)</p>
<p dir="auto">I am running into two issues:</p>
<ol dir="auto">
<li>
<p dir="auto">When I host the packaged version of next (.next folder), it fails on AWS with</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{ Error: Cannot find module '/Users/vadorequest/dev/serverless-with-next/node_modules/next/dist/pages/_document.js'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.7 (/var/task/.next/dist/bundles/pages/_document.js:86:18)
at __webpack_require__ (/var/task/.next/dist/bundles/pages/_document.js:23:31)
at Object.6 (/var/task/.next/dist/bundles/pages/_document.js:78:18)
at __webpack_require__ (/var/task/.next/dist/bundles/pages/_document.js:23:31)
at /var/task/.next/dist/bundles/pages/_document.js:70:18
at Object.&lt;anonymous&gt; (/var/task/.next/dist/bundles/pages/_document.js:73:10) code: 'MODULE_NOT_FOUND' }"><pre class="notranslate"><code class="notranslate">{ Error: Cannot find module '/Users/vadorequest/dev/serverless-with-next/node_modules/next/dist/pages/_document.js'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.7 (/var/task/.next/dist/bundles/pages/_document.js:86:18)
at __webpack_require__ (/var/task/.next/dist/bundles/pages/_document.js:23:31)
at Object.6 (/var/task/.next/dist/bundles/pages/_document.js:78:18)
at __webpack_require__ (/var/task/.next/dist/bundles/pages/_document.js:23:31)
at /var/task/.next/dist/bundles/pages/_document.js:70:18
at Object.&lt;anonymous&gt; (/var/task/.next/dist/bundles/pages/_document.js:73:10) code: 'MODULE_NOT_FOUND' }
</code></pre></div>
<p dir="auto">I don't understand why there are absolute paths used in the generated code. I looked at the content of <code class="notranslate">.next</code> folder and there are tons of them, how are we supposed to use this package if it cannot be moved to another system? I cannot compile on AWS lambda. Is there a way of replacing those path programmatically using webpack for instance?</p>
</li>
<li>
<p dir="auto">I manually replaced those paths to match AWS, basically replaced <code class="notranslate">/Users/vadorequest/dev/serverless-with-next</code> to <code class="notranslate">/var/task</code> in the <code class="notranslate">.next</code> folder. Once uploaded to AWS and hitting my endpoint <code class="notranslate">https://bcwl62lv2e.execute-api.us-east-1.amazonaws.com/dev</code> it loads for 30 seconds and then time out. Logs are empty, I don't know what's happening, at first I assumed the first Next.js load was slow (default timeout 6s) but 30s is way too much and something must be wrong. How can I debug this? Is there a way to configure Next.js to log what it does?</p>
</li>
</ol>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Go to <a href="https://github.com/Vadorequest/serverless-with-next">https://github.com/Vadorequest/serverless-with-next</a></li>
<li><code class="notranslate">git clone git@github.com:Vadorequest/serverless-with-next.git</code></li>
<li><code class="notranslate">nvm use</code> or use node 6.10.3</li>
<li><code class="notranslate">npm i</code></li>
<li><code class="notranslate">npm run build:staging</code> =&gt; Generates a .next folder, you can check files have absolute path here</li>
<li><code class="notranslate">serverless deploy -v --package .serverless</code> =&gt; Deploy to AWS, requires serverless cli, and an AWS account</li>
</ol>
<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>5</td>
</tr>
<tr>
<td>node</td>
<td>6.10.3</td>
</tr>
<tr>
<td>OS</td>
<td>MacOS X</td>
</tr>
</tbody>
</table>