<p dir="auto">setup a new project with</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="mkdir hello-next
cd hello-next
npm init -y
npm install --save react react-dom next
mkdir pages"><pre class="notranslate"><code class="notranslate">mkdir hello-next
cd hello-next
npm init -y
npm install --save react react-dom next
mkdir pages
</code></pre></div>
<p dir="auto">add a new index.js page</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export default () =&gt;
  &lt;div&gt;
    Hello world
    &lt;p&gt;scoped!&lt;/p&gt;
    &lt;style jsx&gt;{`
      p {
        color: blue;
      }
      div {
        background: red;
      }
      @media (max-width: 600px) {
        div {
          background: blue;
        }
      }
    `}&lt;/style&gt;
    &lt;style global jsx&gt;{`
      body {
        background: black;
      }
    `}&lt;/style&gt;
  &lt;/div&gt;"><pre class="notranslate"><code class="notranslate">export default () =&gt;
  &lt;div&gt;
    Hello world
    &lt;p&gt;scoped!&lt;/p&gt;
    &lt;style jsx&gt;{`
      p {
        color: blue;
      }
      div {
        background: red;
      }
      @media (max-width: 600px) {
        div {
          background: blue;
        }
      }
    `}&lt;/style&gt;
    &lt;style global jsx&gt;{`
      body {
        background: black;
      }
    `}&lt;/style&gt;
  &lt;/div&gt;
</code></pre></div>
<p dir="auto">change the style and save.</p>
<p dir="auto">you will then be greeted by style remove / update errors</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="StyleSheetRegistry: styleId: `jsx-803111306` not found.
Error: StyleSheetRegistry: styleId: `jsx-803111306` not found.
    at invariant (node_modules/styled-jsx/dist/stylesheet-registry.js:267:0)
    at StyleSheetRegistry.remove (node_modules/styled-jsx/dist/stylesheet-registry.js:118:0)
    at StyleSheetRegistry.update (node_modules/styled-jsx/dist/stylesheet-registry.js:139:0)
"><pre class="notranslate"><code class="notranslate">StyleSheetRegistry: styleId: `jsx-803111306` not found.
Error: StyleSheetRegistry: styleId: `jsx-803111306` not found.
    at invariant (node_modules/styled-jsx/dist/stylesheet-registry.js:267:0)
    at StyleSheetRegistry.remove (node_modules/styled-jsx/dist/stylesheet-registry.js:118:0)
    at StyleSheetRegistry.update (node_modules/styled-jsx/dist/stylesheet-registry.js:139:0)

</code></pre></div>
<p dir="auto">I'm using next 6.0. I'm having this problem with style jsx. It say styleId not found everytime I changed style.</p>
<p dir="auto">I have folder called 'themes' under src folder which is same level with pages folder.<br>
I use a custom .babelrc to have it resolved as absolute path.</p>
<p dir="auto"><strong>Here is my .babelrc</strong><br>
<code class="notranslate">{ "presets": ["next/babel"], "plugins": [ ["module-resolver", { "root": ["./src"],  alias: { "data": "./src/data", "modules": "./src/modules", "store": "./src/store", "themes": "./src/themes", "utils": "./src//utils", "svgs": "./svgs" } }], ["inline-react-svg"] ] }</code></p>
<p dir="auto"><strong>When I write new component I did something like:</strong></p>
<p dir="auto"><code class="notranslate">import {color, fontSize} from 'themes'; export default () =&gt; (&lt;div&gt;&lt;style jsx&gt; div { color: ${color.green}  } &lt;/style&gt;&lt;/div&gt;)</code><br>
And I'm using withRedux to wrap my page.<br>
I'm using classnames too.</p>
<p dir="auto">It happen on next 6.0 not 5.x.</p>