React Fast Refresh (HMR) doesn't trigger refresh for story files

[schickling]

Describe the bug

I'm using the new React Fast Refresh feature introduced in Storybook 6.1 (currently available on @next). It seems to partly work as I see source changes triggering a re-compile in the terminal. I'm also seeing these changes arriving on the HMR eventstream in my browser, however they don't result in a refresh of my React app.

To Reproduce

Expected behavior

React Fast Refresh should work 🤷‍♂️

Screenshots

System

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
  Binaries:
    Node: 14.10.1 - /usr/local/bin/node
    Yarn: 2.2.2 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 85.0.4183.121
    Safari: 14.0

[shilman]

cc @tooppaaa @yannbf

[tooppaaa]

You are removing all plugins from the config with your current configuration. You need to either spread storybook's plugins or push to the array.

webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...config.resolve.plugins,
      new Plugin()
    ]
  },

[spudly]

He's setting config.resolve.plugins, not config.plugins, so I don't think that's the problem.

I'm also experiencing this issue, and I verified that I experience this even when I'm not modifying the webpack config.

[schickling]

Can confirm that @tooppaaa's suggestion didn't fix it for me.

[spudly]

I switched from Chrome Canary to Chrome stable and it started working for me. Not sure if this is the same issue or not, but if you're using canary you should try a different version/browser.

[schickling]

🤯 this is crazy. Indeed works in Chrome stable but not in Chrome Canary. Would have never expected this to be a possible failure vector.

@tooppaaa @shilman possible still interesting for you to investigate further as other tools with HMR/React Fast Refresh (e.g. Vite) work for me in Chrome Canary.

[shilman]

@pmmmwh does react-refresh-webpack-plugin have any known issues with chrome canary?

[pmmmwh]

@pmmmwh does react-refresh-webpack-plugin have any known issues with chrome canary?

Not any that I know of. I am not aware of any problem that would be cause by browser behavioural change.

Can someone post a picture of the console with log level all? I don't have much time to investigate but sometimes logs surface causes quite well.

[schickling]

Update: While working on another project using the latest version of Storybook (6.1.11) HMR/React Fast Refresh is now not even working in the regular version of Chrome nor in Safari. I've tested it using various projects to no avail.

@pmmmwh @shilman is React Fast Refresh being broken a known issue? The has workaround label should probably be removed.

[shilman]

@schickling Do you have a repro repo you can share?

[schickling]

Yes, I've created a repro repo here: https://github.com/schickling-repros/storybook-repro

Simply run yarn install and then yarn dev / yarn storybook.

And recorded a video demo of the problem here:

https://www.loom.com/share/06f145beed8b4d909e62bf4518278dff

[tooppaaa]

Hello !

Fast Refresh only works in non ".stories." files.

This is currently a limitation we found with @yannbf, If you update your story, the state is not saved and a "classic" HMR occurs. If you update the component itself, it will work as expected.

[schickling]

Thanks for the clarification @tooppaaa 🙏

Would be great to see this limitation be gone with an upcoming version :)