Styled-jsx: Using styled jsx tag in a React.Fragment breaks zeit/next's HMR

[MrToph]

Expected Behavior

Editing stlye jsx styles resting in React.Fragment should work with next's HMR, espcially as next ships with styled-jsx per default.

Current Behavior

When I put a style jsx tag into a React.Fragment and change a style jsx css property, the page reloads with HMR, but then I get the error:

StyleSheetRegistry: styleId: `jsx-1655195659` not found.
Error: StyleSheetRegistry: styleId: `jsx-1655195659` not found.
    at invariant (http://localhost:3000/_next/-/page/index.js:47200:11)

export default class Canvas extends React.Component {
    render() {
        return (
            <React.Fragment>
                <div className="canvas" />
                <style jsx>{`
                    .canvas {
                        position: relative;
                        height: 100vh;
                        background-color:#123;
                    }
                `}</style>
            </React.Fragment>
        )
    }
}

When I replace React.Fragment with div it works fine

Steps to Reproduce (for bugs)

I started with the with-styled-jsx-scss: npx create-next-app --example with-styled-jsx-scss with-styled-jsx-scss-app

1. Clone this minimal reproduction.
2. yarn install, yarn run dev
3. Go to localhost:3000
4. Change the CSS rule background-color in src/components/Canvas.jsx
5. See it breaking

Your Environment

| Tech | Version |
|---------|---------|
| next | v5.0.0 |
| node | v8.10 |
| OS | Windows 10 |
| browser | Latest Chrome |

[MrToph]

Is there currently a workaround for this? I don't want to create a wrapper div just so I can style my component.

[giuseppeg]

This might not be an issue with styled-jsx but with HMR, maybe due to how re-rendering happens with Fragments and the fact that the elements (div and style tags) are siblings.

In reality it seems that the issue is that with HMR shouldComponentUpdate for the style tag is never called, I don't know why.

I tried to change the background-color and I got the error, but then if you try to change it again, the error page is unmounted and the app re-renders correctly (i.e. it works).

For what is worth, looking at your example you could just nest the styles inside of the .canvas div. Obviously this won't work when you have self closing tags like img or input.

[giuseppeg]

@timneutkens probably you have more experience with HMR ^

[jaydenseric]

Same issue, but the error I see is:

Warning: Received `true` for a non-boolean attribute `jsx`.

If you want to write it to the DOM, pass a string instead: jsx="true" or jsx={value.toString()}.

[giuseppeg]

@jaydenseric usually that means that you component was not transpiled at all

[Negan1911]

I'm getting the same issue but without a React.Fragment tag, just using the exact one from the example:

import React from 'react'

export default () => (
  <div>
    Hello world
    <p>scoped!</p>
    <style jsx>{`
      p {
        color: blue;
      }
      div {
        background: gray;
      }
      @media (max-width: 600px) {
        div {
          background: blue;
        }
      }
    `}</style>
    <style global jsx>{`
      body {
        background: black;
      }
    `}</style>
  </div>
)

Save it, start next, change some prop on the CSS, you'll get this:

You can see that i don't have anything special:

[Richtervn]

Oh please, I did a search before open #4246. I've just upgrade from next 5.1 to 6. I swear I don't have any wrong syntax or empty style jsx. I even never use React.Fragment

[omar-bz]

you can reproduce this issue with a new project using this "dependencies": {
"next": "^6.0.0",
"react": "^16.3.2",
"react-dom": "^16.3.2"
}
and it occur in the hot reload.

[kamilml]

This is so annoying. I use style jsx for all the css code in my components. And I am getting this error every time.

[kamilml]

I fixed the error reinstalling [email protected] instead 6.00

[giuseppeg]

Good news I tracked down the source of the issue to react-hot-loader v4. I'll work with the Next.js folks to fix this asap :)

[giuseppeg]

This is fixed in [email protected] or next@canary if you will

[timmywil]

I'm using [email protected] and am still getting the error described by @Negan1911.

[timneutkens]

@timmywil see https://github.com/zeit/next.js/issues/4299