Error: Couldn't find story matching '' after HMR

[arthuralee]

Describe the bug
During HMR, we get a Error: Couldn't find story matching '' after HMR error in the console

To Reproduce
Steps to reproduce the behavior:

1. Follow doc instructions to create a sample storybook react-native app
2. Add require("./.ondevice").default; to App.tsx. This mimics an app setup where Storybook is used as a secondary screen/component rather than the main app
3. Edit a tsx file in the project, and let HMR happen
4. Observe the error

Expected behavior
No error

Screenshots

 ERROR  Unable to load story '':
 ERROR  [Error: Couldn't find story matching '' after HMR.
- Did you remove it from your CSF file?
- Are you sure a story with that id exists?
- Please check your stories field of your main.js config.
- Also check the browser console and terminal for error messages.]
 LOG  [Error: Couldn't find story matching '' after HMR.
- Did you remove it from your CSF file?
- Are you sure a story with that id exists?
- Please check your stories field of your main.js config.
- Also check the browser console and terminal for error messages.]

Code snippets
If applicable, add code samples to help explain your problem.

System:
Please paste the results of npx -p @storybook/cli@next sb info here.

Additional context
This seems to be caused by this line https://github.com/storybookjs/react-native/blob/next/packages/react-native/src/preview/start.tsx#L56 which loads a story with story ID = ''. Because the storybook UI isn't open in this scenario, the story loading code breaks trying to load a story with id ''. Changing this line to selection: null seems to solve the problem.

[LaurensUP]

I've had this too, I think it's an improper export of the StorybookUIRoot

// App.tsx
import StorybookUIRoot from '../../.storybook/Storybook';

const StoryBookApp = () => (
    <StorybookUIRoot />
  );

export default StoryBookApp; 

[dannyhw]

hey, sorry only just saw this. Do you have any story selected when the error happens or is it only when there are no stories?

[LaurensUP]

For me, I haven't managed to render a story yet, because I'm stuck on this error.

[arthuralee]

For me, this happens when

1. I have stories
2. None are selected
3. The storybook UI is not even rendered yet (i'm on another screen in the app and haven't navigated to the storybook screen yet)

[dannyhw]

can you confirm the version of storybook you are using?

[LaurensUP]

    "@storybook/core-common": "^7.0.4",
    "@storybook/react-native": "^6.5.0-rc.12"

Is it OK that I am involved in this too? I don't wanna be impolite and hijack this.

[dannyhw]

Avoid using any v7 package as v6 is not compatible with v7. Also you should update to 6.5.3 for @storybook/react-native.

[arthuralee]

6.5.2. Heres a repro: https://github.com/arthuralee/rn-sb-hmr-bug-repro

[LaurensUP]

Getting the same error on these versions:

    "@storybook/core-common": "6.5.3",
    "@storybook/react-native": "6.5.3"

I got to these versions by following this readme

[dannyhw]

@LaurensUP oops! I guess I need to update that readme, thanks for pointing it out 🙏

[dannyhw]

Thanks! @arthuralee really appreciate the repro. Unfortunately this week I'm crazy busy with work but I promise to take a proper look as soon as I can.

[LaurensUP]

I've managed to get passed this issue and get a storybook running. Even though I'm not sure how.
So it doesn't look like a problem with the Storybook library itself.

[LaurensUP]

Update I had everything set up and working, but when modifying the stories I ran into a very similar errormsg:

 ERROR  Unable to load story 'react-native-button--basic':
 ERROR  [Error: Couldn't find story matching 'react-native-button--basic'.
- Are you sure a story with that id exists?
- Please check your stories field of your main.js config.
- Also check the browser console and terminal for error messages.]

Even though I don't have a react-native-button--basic story anywhere.

[LaurensUP]

This is how I can reproduce the original error:

• Restarting the normal app (not loading StoryBookUI)
• Hot reload the root component and change it into <StorybookUIRoot />

 ERROR  Unable to load story '':
 ERROR  [Error: Couldn't find story matching '' after HMR.

[LaurensUP]

Does the title have to match the component name exactly?

[dannyhw]

No you just need a title to exist , the error is more likely the asyncstorage key is out of sync. Have you tried reinstalling the app?

[dannyhw]

Make sure you have also ran the script to generate the stories imports.

[LaurensUP]

@arthuralee I've gotten some progress by restarting Metro with the --reset-cache flag

# start Metro
npm start -- --reset-cache

It seems that the bundle is confused/corrupted with bad imports somehow.
This seems to help for me.

Also, this is how I'm currently importing Storybook:

// src/app/App.tsx
const mainApp = <Root />
const storyBookApp =<StorybookUIRoot/>

const storyBookEnabled = true;

const App = () => {
  useTracking();

   return (
    <AppProviders>
      <AppInitializer>
        { storyBookEnabled ? storyBookApp : mainApp}
      </AppInitializer>
    </AppProviders>

  );
};

// .storybook/Storybook.tsx
import { getStorybookUI } from '@storybook/react-native';
import './storybook.requires';

const StorybookUIRoot = getStorybookUI({});

export default StorybookUIRoot; 

[dannyhw]

@arthuralee sorry its taken me a while but I ran your repro and got no errors. Do I need to follow any steps to make the error happen?

[arthuralee]

@dannyhw apologies, i may have messed up the repro. I've fixed it now and am still able to repro with the latest version. Here are my exact steps after cloning the repo:

1. yarn
2. npx expo start
3. Confirm app is running and it says "Open up App.tsx to start working on your app!"
4. Make a modification to components/Button/Button.stories.tsx
5. Observe HMR error in the console

The key here is that the storybook UI root component is imported into the module tree but not rendered. This is common if we want Storybook to be a secondary screen within the app. If we render the storybook UI right away as the App entry point, this issue does not repro.

[dannyhw]

@arthuralee do you have sbmodern in your metro resolvers config?

[arthuralee]

Yep: https://github.com/arthuralee/rn-sb-hmr-bug-repro/blob/main/metro.config.js
This project was created using the expo-template-storybook template

[dannyhw]

sorry its been a while, are you still having this issue?

[arthuralee]

yep, we've been on 6.5.3 so the same issue exists. We've been patching https://github.com/storybookjs/react-native/blob/next/packages/react-native/src/preview/start.tsx#L56

--- a/node_modules/@storybook/react-native/dist/preview/start.js
+++ b/node_modules/@storybook/react-native/dist/preview/start.js
@@ -40,7 +40,7 @@ export function start() {
         testing: false,
     };
     const urlStore = {
-        selection: { storyId: '', viewMode: 'story' },
+        selection: null,
         selectionSpecifier: null,
         setQueryParams: () => { },
         setSelection: (selection) => {

[dannyhw]

Ok I'll try add that fix today, thanks

[dannyhw]

fix released in version 6.5.4

@arthuralee can you try updating and removing the patch?

[arthuralee]

sorry, super late reply but it does work 🎉 thanks!