Storybook: React: Support fast refresh

[shilman]

Fast refresh is a reimplementation of hot module reloading (HMR) available first in RN and now in web. The API is stable, although the tooling (e.g. Webpack plugin) are evolving.

@gaearon has written a guide for implementors. We should support it in Storybook, possibly behind a feature flag in 6.x.

[ericclemmons]

Here are the resources I've gathered so far:

• The first webpack plugin implementation I was aware of, but has some edge-cases to be resolved:
  https://github.com/pmmmwh/react-refresh-webpack-plugin
• Next.js support (implementation is spread across multiple PRs):
  https://github.com/zeit/next.js/pull/12008
• Parcel's support:
  https://github.com/parcel-bundler/parcel/pull/3654
• Fast Refresh support for CRA via customize-cra:
  https://github.com/esetnik/customize-cra-react-refresh
• Experimental support in CRA via REACT_REFRESH=true:
  https://github.com/facebook/create-react-app/pull/8582

[fakiolinho]

I think that the flag for experimental support is going to be named FAST_REFRESH=true as mentioned here 😉

[tooppaaa]

After trying to add the plugin as described in the readme I encountered multiple errors saying
Module not found: Error: Can't resolve '\storybook\examples\official-storybook\storybook-init-framework-entry.js'

My thoughts is the plugin can't transform virtual modules easily and fails.

As discussed with @ndelangen a first step would be to stop using require.context to configure stories but use a loader that registers *.stories.* when it can using the clientApi.

I'll try to work on that !

[tooppaaa]

Just added the PR if anyone wants to help !

[brunoreis]

I started to use a component driven approach as you suggest in the docs, but the discovery that the react refresh (we use next 9) is not supported and that I would have to wait more than 8s to see a change quickly threw cold water on all the excitement. I understand that the best sequence to this previous phrases would be a help proposal from me here, unfortunately I'm not able to dive into that ATM.

Despite that, I thought you would like to acknowledge that the "onboarding" into SB and to a component driven approach is being impaired by this issue. I know this is an OS project. Please don't take this as a complaint. My only intention here is to be constructive and add some feedback to help on your prioritization.

[shilman]

@brunoreis any idea why it takes 8s to see a change? is it because code that uses fast refresh is a lot slower in environments that don't support it? or you have a large project? i'm not familiar with fast refresh yet--just want to understand the severity of this issue. thanks for reporting & helping make the project better!

[brunoreis]

@shilman, we are using Next.js and it uses fast refresh to do the "hot reload". Since that is not supported by SB, it's waiting for a new webpack build to refresh the screen.

I'm not sure why the Webpack build is taking so long though. But to use this component driven approach/dev cycle, I think the way to go is to use the "hot reload"/"fast refresh" strategy and not wait for the webpack build anyway.

Maybe I just did not set it up correctly. But I could not find any instructions on how to use any other "hot reload" strategy on next.

I'm using a workaround and created an empty page to serve as a wrapper to my components, but that makes me do some redundant steps like creating mock data there and then moving to SB. It also restricts me from using knobs and other nice addons on the development flow. I really feel that doing this uniquely on SB would speed up our dev workflow.

[shilman]

@brunoreis gotcha. in normal React HMR i'd expect updates to take a second or so, so it def sounds like there's a problem of some kind (whether with storybook, next, or perhaps your setup). we're on the verge of releasing storybook 6, so hopefully we can get this working in 6.1. in addition, nextjs is making a storybook preset for next ("storybook plugin" in next parlance?) and perhaps they will have better settings out of the box (cc @ijjk @Timer). at any rate, we want to provide a great experience for nextjs users, so will give this priority as soon as 6.0 stabilizes. thanks for your patience!

[brunoreis]

Hey, np at all.

I suspect I did not make myself clear. The fast refresh on next is not a problem, it works out pretty well and quick.

It's when I try to render the SB story that the refresh takes those 8 seconts. I think it's because SB don't support the fast refresh, and then it will only refresh when the rebuild through webpack happens. Rebuilding through webpack is not the usual flow on development. It only is happening on SB because, I think, of the lack of the react refresh support.

I'm glad to know the next team is working on some integration and thanks for your response.

[petermikitsh]

Has anyone used https://github.com/gaearon/react-hot-loader with Storybook? I've followed the instructions in its readme, but no dice.

[gaearon]

That project is pretty much dead, please don't use it. It's incredibly fragile and it's what Fast Refresh replaces.

[petermikitsh]

I had success following the instructions at https://github.com/pmmmwh/react-refresh-webpack-plugin, works great with Storybook 👍

[tooppaaa]

Fresh attempt (WIP): https://github.com/storybookjs/storybook/tree/react/refresh2

@petermikitsh Do you mind sharing your configuration here ?

[petermikitsh]

@tooppaaa

package.json:

{
  "devDependencies": {
+   "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
+   "react-refresh": "^0.8.3",
  }
}

babel.config.js:

+const isProdBuild = process.env.NODE_ENV === 'production';

module.exports = (api) => {
  api.cache(true);
  return {
    plugins: [
+     !isProdBuild && 'react-refresh/babel',
    ].filter(Boolean),
  };
};

.storybook/main.js:

+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const isProdBuild = process.env.NODE_ENV === 'production';
module.exports = {
  webpackFinal: (config) => {
+   config.plugins = [
+     !isProdBuild && new ReactRefreshWebpackPlugin(),
+     ...config.plugins,
+   ].filter(Boolean);
    return config;
  },
};

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.12 containing PR #12470 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.