Styled JSX does not hot reload

[justswim]

See this GIF:
http://imgur.com/a/t7nKx

When I'm using styled JSX, it doesn't hot reload in the browser.
When I change styles, they are not hot reloaded correctly.

Steps to repro:

yarn dev
go to localhost:3000
Open up pages/index.js
change a style, for example change color: #333 to color: white

Expected behavior

color of the text changes to white

Actual behavior

styles on the page somehow disappear. A page refresh is required to render the correct styles

Environment
node --version: 7.6.0
npm --version: 5.0.3

Here is a demo repo where this is happening: https://github.com/justswim/nextjs-no-hot-style-reload

Thank you for your help!

[tylermares]

I also had a similar problem today, and it was resolved by ensuring that the plugin "styled-jsx/babel" was in my babel config (.babelrc). If I changed a component and the style, it would reload, but a style change alone would not.

The Usage instructions say to do this... I thought I had already done that step, but may have undone it accidentally.

[justswim]

Thanks Tyler ... do you mind posting your babel config file? I'm a n00b at this, thanks for your help!

[tylermares]

For .babelrc, I have:
{
"presets": [
// webpack understands the native import syntax, and uses it for tree shaking
["es2015", {"modules": false}],
"react"
],
"plugins": [
"styled-jsx/babel",
"react-hot-loader/babel",
]
}

Your config might be somewhere other than .babelrc, i'm not sure, but hopefully adding "styled-jsx/babel" to your array of plugins in your config will do the trick

[paigecwilley]

@justswim Did the above work for you? I'm having a similar issue, and it didn't work.

[justswim]

@tylermares @paigecwilley I don't think I understand the .babelrc example. Do I just add a file named .babelrc ? When I create a next.js app, there is no .babelrc file to begin with, so I don't quite understand what it means to make one. I do have a next.config.js file that looks like this:

module.exports = {
  webpack: (config) => {
    if (config.resolve.alias) {
      delete config.resolve.alias['react']
      delete config.resolve.alias['react-dom']
    }
    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: 'empty'
    }

    return config
  }
}

Can I add something here to solve the problem?

[tylermares]

Although I am not using styled-jsx in the context of next.js, yes I think you should try placing a .babelrc file somewhere in the root of your project if you don't already have one.

I noticed on https://github.com/zeit/next.js/ the listing of files on the root of that project does contain a .babelrc (first one after the folders). Though it does not have this plugin added there, it sounds like styled-jsx is an add-on or being used in a limited way, as far as reloading.

In debugging this I have noticed different cases, such as style not reloading if the style uses a variable declared outside (a change to it would not refresh the page) -- so it might help to understand the limits of reloading by testing combinations of saving just a style change and/or saving another change to your component, and seeing if the reload detects one or both.

I started using styled-jsx only yesterday, so maybe I have had a bit of luck having the correct setup in my project...

[arunoda]

@justswim there was a problem with the styled-jsx.
Could you try the latest version of Next.js (2.4.4)

[viczam]

still happens in the custom-server-express example

[almeynman]

Similar issue with basic-css example

[jamilabreu]

@arunoda also seeing this on a clean install of latest beta:

http://recordit.co/b5mGt8dWlP

style jsx updates cause old styles to disappear, but new styles take effect after manual refresh

[arunoda]

We've fixed this issue.
Update your Next.js version.
Please read here: vercel/styled-jsx#236 (comment)