Next.js: HMR breaks with: StyleSheetRegistry: styleId: not found.

[MrToph]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Editing stlye jsx styles should work with HMR.

Current Behavior

When I 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)

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 a CSS rule, f.i. 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]

Okay, I figured it out why it happens: It has to do with React.Fragment. style jsx seems to not be refreshing correctly when put in a top level React.Fragment element:

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

[Jarred-Sumner]

FWIW, I can confirm that this happens to me too

[timneutkens]

Should be filed in the styled-jsx repository. Seems like someone else already did: https://github.com/zeit/styled-jsx/issues/147

[MrToph]

Correct me if I'm wrong, but the ticket mentioned has something to do with dynamic classnames.
I'm not using dynamic classnames here.

The issue is because of React.Fragment and HMR. styled-jsx works fine with React.Fragment until you change a CSS rule, so it's more of an issue with the way the style jsx tags are gathered and injected to the page with HMR.

[giuseppeg]

yea the issues are not related. I am not sure how HMR works but it is possible that the is some race condition e.g. maybe the component is unmounted and then updated. I need to investigate. @MrToph feel free to open an issue on the styled-jsx repo