Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Next 6 styled-jsx not working when extending stateful component #4299

Closed
1 task done
josiahwiebe opened this issue May 7, 2018 · 2 comments · Fixed by #4317
Closed
1 task done

Next 6 styled-jsx not working when extending stateful component #4299

josiahwiebe opened this issue May 7, 2018 · 2 comments · Fixed by #4317

Comments

@josiahwiebe
Copy link
Contributor

  • 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
Copy link
Member

timneutkens commented May 8, 2018

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
Copy link
Contributor Author

Fantastic! Thanks, @timneutkens 🙌

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants