storybook does not handle [email protected] new fast refresh mode

[mgcrea]

Describe the bug

Following the release of [email protected], legacy "hot module reloading" and "live reloading" have been merged in a single new "fast refresh" mode to hot reload components (more details in this blog post).

Unfortunately, this new mode does not work with storybook as I get WARN Story with id button--default-view already exists in the store! errors when fast refresh kicks in.

Since livereload isn't an option anymore, it makes developing components with storybook highly impractical as you don't have any refresh anymore.

To Reproduce Steps to reproduce the behavior:

1. Create a new react-native project with react-native init AwesomeProject --version react-native@next
2. Install storybook, and save/update a story
3. See warning, no refresh

Expected behavior Working fast refresh while editing a story

System:

Environment Info:

  System:
    OS: macOS 10.14.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 68.0.1
    Safari: 12.1.1
  npmPackages:
    @storybook/react-native: ^5.1.11 => 5.1.11 

Note that I'm using the following hack to have working hooks:

addDecorator(Story => <Story />);

[shilman]

@mgcrea Any interest in trying to tackle this?

[mgcrea]

@shilman Yep, could try to fix this, but I'm not sure to know where to look,

The warning does seem purely informative (see story_store.ts).

Any insights on where I should look/fiddle?

[shilman]

@Gongreg @benoitdion any ideas?

[Gongreg]

@shilman, I will keep this task open and close the old one, since this format is replacing hot reloading.

[Gongreg]

Hi. Actually fast reload does work, but it doesn't work when you are using addDecorator(Story => <Story />) .

Edit:

I've played around a bit more and I see that if you are editing the same story you have visible the fast refresh works well. There are other issues, but I think they are related to: https://github.com/storybookjs/storybook/issues/8306

So If you are changing only something deep enough inside so that the top level rerender doesn't happen then you won't get a warning.

@shilman, I am not sure how are you going to handle full rerender on the web, when stories are updated?

[jarodevs]

Hello, so i am not actually using any hooks neither the addDecorator function. I still have a : TypeError: JSON.strinfigy cannot serialize cyclic structures when using fresh reload on RN. Any fix to it?

Further description of the error at : https://github.com/storybookjs/storybook/issues/8734

[Gongreg]

Hey. To sum it up, react native storybook simply doesn't properly handle fast refresh at the moment. Even if it works a little bit it is just pure luck.

Everyone is welcome to try to make it work :)

[AlexandreLage]

Sadly I can't use this package then :'(

[Gongreg]

@AlexandreLage, sorry to hear that. It can definitely be fixed, but someone has to work on it.

[AlexandreLage]

Hey, just disableWebsocket: false did the trick.

const StorybookUIRoot = getStorybookUI({
  asyncStorage: AsyncStorage,
  port: 7007,
  host: "0.0.0.0",
  onDeviceUI: false,
  resetStorybook: true,
  disableWebsockets: true
});

[stephanos7]

But disabling web sockets also cuts communication with the web server to preview stories on the browser correct? disableWebsockets: false allows me to render the stories in the iOS simulator but stories have stopped loading on the browser, is this expected with this workaround?

[dbenfouzari]

@stephanos7 try to insert option onDeviceUI: false to make it work again.

[Anitorious]

@shilman @dbenfouzari These work arounds only work if you don't intend to use the features of storybook that make it a good investment. As it stands, it's currently a glorified sandbox environment for static components. Tagging it with has workaround may be misleading? I'd like to help in anyway I can to get these issues resolved though.

[Gongreg]

@Anitorious, feel free to try to fix the issue. As it currently stands I see a lot of people who would benefit from having fast refresh working out of the box.

[stephanos7]

@stephanos7 try to insert option onDeviceUI: false to make it work again.

@dbenfouzari thanks, this did load the available stories on the web's side bar - though nothing renders when you select a story. Not entirely sure if my issue is related to this, will dig into it.

[Gongreg]

Hello. I've managed to get fast refresh to work (no warnings), and actually adding/removing stories works.

There is one issue though, we will have to add a limit of calling only one storiesOf per file.

I would like your opinion regarding it, will it be an issue?

If not I would rather keep it like that, since we will try to also add CSF format in the future.

The technical side:

React Native fast refresh allows to use only one module.hot.dispose(), while Storybook ClientApi had multiple module.hot.dispose (https://github.com/storybookjs/storybook/blob/next/lib/client-api/src/client_api.ts) calls. By removing one of the calls (https://github.com/storybookjs/storybook/blob/next/lib/client-api/src/client_api.ts#L210) the remaining call (https://github.com/storybookjs/storybook/blob/next/lib/client-api/src/client_api.ts#L175) is actually called.

There were also some changes in the RN Storybook code itself, I will make a PR for it.

[pang0018]

@Gongreg FWIW, I personally only call storiesOf once per file

[matiushenkoa]

Hello. I've managed to get fast refresh to work (no warnings), and actually adding/removing stories works.

There is one issue though, we will have to add a limit of calling only one storiesOf per file.

I would like your opinion regarding it, will it be an issue?

If not I would rather keep it like that, since we will try to also add CSF format in the future.

The technical side:

React Native fast refresh allows to use only one module.hot.dispose(), while Storybook ClientApi had multiple module.hot.dispose (https://github.com/storybookjs/storybook/blob/next/lib/client-api/src/client_api.ts) calls. By removing one of the calls (https://github.com/storybookjs/storybook/blob/next/lib/client-api/src/client_api.ts#L210) the remaining call (https://github.com/storybookjs/storybook/blob/next/lib/client-api/src/client_api.ts#L175) is actually called.

There were also some changes in the RN Storybook code itself, I will make a PR for it.

But still, there will be an issue when you will have 1 storiesOf per file, but few add calls, isn't it?

storiesOf('SomeComponent', module)
  .add('value_1', () => <SomeComponent someProp="value_1">Component value_1</SomeComponent>)
  .add('value_2', () => <SomeComponent someProp="value_2">Component value_2</SomeComponent>)
  .add('value_3', () => <SomeComponent someProp="value_3">Component value_3</SomeComponent>);

[Gongreg]

Hey @matiushenkoa , actually there shouldn't be, since module.hot.dispose() will take care of it. That is why we will allow only one storiesOf per file.

[dannyhw]

fast refresh issues are now solved in 6.5 so I would consider this completed. Let me know if you want it reopened.