Next 6 styled-jsx not working when extending stateful component

[josiahwiebe]

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

Expected Behavior

App should automatically reload with new CSS changes.

Current Behavior

When making CSS changes, the app throws an error:
Error: StyleSheetRegistry: styleId: `jsx-215943140` not found.

A page refresh clears the error and loads the app correctly.

Steps to Reproduce (for bugs)

1. Install next@canary
2. Create a new React.Component in pages/index.js
3. Add some <style jsx></style>
4. Open the app and make some CSS changes

Show code example

import React, { Component } from 'react'

export default class Index extends Component {
  render() {
    return (
      <div>
        <h1>next@canary</h1>
      <style jsx>{`
        h1 {
          font-size: 3rem;
        }
      `}</style>
      </div>
    )
  }
}

Initially I thought it was an issue with my .babelrc config (as I was using PostCSS plugins) but I eliminated those and was still experiencing the issue.

If I change the stateful component to a stateless component it works as expected.

I created a sample repository here to allow replication of the issue. This issue could be related to #4265 but there might be some differentation.

Context

The issue primarily affects the developer experience. It is managable but irritating.

Your Environment

Tech	Version
next	6.0.1-canary.1
node	8.9.0
OS	macOS 10.13.4
browser	Chrome 66.0.3359.139

[timneutkens]

Will be fixed when gaearon/react-hot-loader#968 is merged. Took a while to figure out what was happening, but the wrong props were hot reloaded.

[josiahwiebe]

Fantastic! Thanks, @timneutkens 🙌