react-native: storybook does not handle react-native@0.61.0 new fast refresh mode

Describe the bug

Following the release of react-native@0.61.0-rc.0, 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:

Create a new react-native project with react-native init AwesomeProject --version react-native@next
Install storybook, and save/update a story
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 />);

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 17
Comments: 20 (10 by maintainers)

Most upvoted comments

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
});

+12

AlexandreLage on Jan 16, 2020

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

Anitorious on Jan 20, 2020

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

jarodevs on Nov 6, 2019

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.

Gongreg on Mar 6, 2020

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.

Gongreg on Feb 15, 2020

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

Gongreg on Jan 20, 2020