<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">App should automatically reload with new CSS changes.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">When making CSS changes, the app throws an error:<br>
<code class="notranslate">Error: StyleSheetRegistry: styleId: `jsx-215943140` not found.</code></p>
<p dir="auto">A page refresh clears the error and loads the app correctly.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Install <code class="notranslate">next@canary</code></li>
<li>Create a new <code class="notranslate">React.Component</code> in <code class="notranslate">pages/index.js</code></li>
<li>Add some <code class="notranslate">&lt;style jsx&gt;&lt;/style&gt;</code></li>
<li>Open the app and make some CSS changes</li>
</ol>
<details>
<summary>Show code example</summary>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React, { Component } from 'react'

export default class Index extends Component {
  render() {
    return (
      &lt;div&gt;
        &lt;h1&gt;next@canary&lt;/h1&gt;
      &lt;style jsx&gt;{`
        h1 {
          font-size: 3rem;
        }
      `}&lt;/style&gt;
      &lt;/div&gt;
    )
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-v">Component</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">Index</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>next@canary<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">jsx</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s">`</span>
<span class="pl-s">        h1 {</span>
<span class="pl-s">          font-size: 3rem;</span>
<span class="pl-s">        }</span>
<span class="pl-s">      `</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">style</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
</details><br>
<p dir="auto">Initially I thought it was an issue with my <code class="notranslate">.babelrc</code> config (as I was using PostCSS plugins) but I eliminated those and was still experiencing the issue.</p>
<p dir="auto">If I change the stateful component to a stateless component it works as expected.</p>
<p dir="auto">I created a sample repository <a href="https://github.com/josiahwiebe/next-canary-styled-jsx">here</a> to allow replication of the issue. This issue could be related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="320032708" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/4265" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/4265/hovercard" href="https://github.com/vercel/next.js/issues/4265">#4265</a> but there might be some differentation.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">The issue primarily affects the developer experience. It is managable but irritating.</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>6.0.1-canary.1</td>
</tr>
<tr>
<td>node</td>
<td>8.9.0</td>
</tr>
<tr>
<td>OS</td>
<td>macOS 10.13.4</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 66.0.3359.139</td>
</tr>
</tbody>
</table>
<p dir="auto">In <code class="notranslate">server/build/webpack/utils.js</code>, <code class="notranslate">nextPagesDir</code> is absolute and is used to add <code class="notranslate">_error.js</code> and <code class="notranslate">_document.js</code> as webpack entries.</p>
<p dir="auto">This absolute path prevents you from compiling the code in one dir, and then moving it to another dir. All paths need to be relative.</p>
<p dir="auto"><a href="https://github.com/zeit/next.js/blob/e093441bad588e98765a05df90f76f75283eda07/server/build/webpack/utils.js#L4">https://github.com/zeit/next.js/blob/e093441bad588e98765a05df90f76f75283eda07/server/build/webpack/utils.js#L4</a></p>
<p dir="auto">I am using pnpm, this could also be related...</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">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>5.0.0</td>
</tr>
<tr>
<td>node</td>
<td>8.1.2</td>
</tr>
<tr>
<td>OS</td>
<td>macOS + Ubuntu</td>
</tr>
<tr>
<td>browser</td>
<td></td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>