Storybook: React Fast Refresh (HMR) doesn't trigger refresh in frontend

[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.