HMR with RN Story of "..." named "..." already exists

[duro]

If you are reporting a bug or requesting support, start here:

Bug or support request summary

I have reviewed issue #1581 but do not seem to be having the same problem mentioned there. I am certain that I have passed module to my storiesOf call.

When HMR is enabled, and I save the file, I get an error:

Story of "..." named "..." already exists

Steps to reproduce

1. Setup a simple react-native storybook
2. Launch app
3. Save file

Please specify which version of Storybook and optionally any affected addons that you're running

• storybook/react-native: ^3.4.0"
• storybook/addon-actions: "^3.4.0"
• storybook/addon-links: "^3.4.0"
• storybook/addons: "^3.4.0"

Affected platforms

• React Native v25.0.0

Screenshots / Screencast / Code Snippets

import React from 'react'
import { Text } from 'react-native'

import { storiesOf } from '@storybook/react-native'
import { action } from '@storybook/addon-actions'
import { linkTo } from '@storybook/addon-links'

storiesOf('ExploreCard', module).add('default', () => <Text>Hi!</Text>)

Additional Info

One thing I noticed is that when I console.log out the m var here: https://github.com/storybooks/storybook/blob/master/lib/core/src/client/preview/client_api.js#L52

The object looks like this:

Object {
  "exports": Object {},
  "hot": Object {
    "accept": [Function accept],
    "acceptCallback": null,
  },
}

So it does not have a .dispose() method. Is this a change in the HMR spec?

[duro]

I noticed this very old issue in the react-native repo whis is the only other mention I have seen of hot.dispose being missing:

facebook/react-native#8558

[duro]

I was able to find a work around for this by modding like so:

if (m && m.hot) {
      if (m.hot.dispose) {
        m.hot.dispose(() => {
          this._storyStore.removeStoryKind(kind);
          this._storyStore.incrementRevision();
        });
      } else {
        this._storyStore.removeStoryKind(kind);
        this._storyStore.incrementRevision();
      }
    }

https://github.com/storybooks/storybook/blob/master/lib/core/src/client/preview/client_api.js#L52

I'm going to try and work this up as a PR

[duro]

After a bit more digging, it would seem this can be closed. It turns out that the Metro bundler that the RN uses failed to implement .dispose() in their initial polyfill for module

That said, they have fixed this in version 0.29.0

It would appear that RN v0.55.0 which was released today, upgrades to metro 0.31, and should make it's way into tools like Expo and CRNA in the next week or so.

I guess I'll just be patient...

[tmeasday]

Thanks for digging into this @duro. This sounds like good news indeed! Unexpected benefit of refactoring the RN code to use this code path even though it didn't work at the time ;)

[Maxim-Filimonov]

The same error is still present in the latest version.
Just tested with

react-native init MyProj
getstorybook

Storybook 3.4.0
RN 0.55.1

Story of "Welcome" named "to Storybook" already exists.

[fedegl]

I am still having this issue on react-native 0.55.2 and storybook 3.4.1

[duro]

That's bizzare, because upgrading to 0.55 resolved this for me. I did have to make sure all my build caches were cleaned, but can't think of anything else that I had to do to resolve.

…

On Thu, Apr 12, 2018 at 7:34 AM Federico Gonzalez ***@***.***> wrote: I am still having this issue on react-native 0.55.2 and storybook 3.4.1 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3348 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABE4I5sBCtV3bYXZ-G-t4mWwYW_SIyNks5tn2XugaJpZM4TFzdH> .

[Maxim-Filimonov]

I've attached source code to test - latest.zip

[a-golovanov]

The issue can be easily reproduced when storiesOf is called two or more times in a single js file (like in the auto-generated stories). Both calls try to set a dispose callback, but the metro "require" polyfill retains only the last one. Any modifications to that file will lead to the error.

[stdavis]

I'm having the same issue. Did anyone ever figure out a solution other than not calling storiesOf multiple times in the same module?

[leotm]

npx -p @storybook/cli sb init --use-npm --type react_native

Also gives us 2 storiesOf from the get-go, then HMR later:

• react-native 0.62.2
• @storybook/react-native 5.3.18

---

@shilman Could you clarify our workaround?

YellowBox.ignoreWarnings(['Story with id']); // I'm doing this for now for my E2E tests

---

Edit: @deprecated YellowBox has been replaced with LogBox now ^

---

Edit: I've found since upgrading the above warning can now be removed (sample repo)