using `configure` leads to CSF story not showing in the stories list until hot reload is triggered

[flochtililoch]

Describe the bug When using the configure API that helps with initializing custom code before storybook starts, the stories written using CSF format don't render in the list of stories (on both Storybook web UI and mobile UI). Saving a file present in the bundle to trigger hot reload will cause the missing stories to appear on the Storybook web UI, but these will still be missing on the Storybook mobile UI. Commenting out the code that calls configure will prevent the bug from happening. EDIT: stories using storyOf don't have this problem and will render on the first load.

To Reproduce See reproduction steps in this repo.

Expected behavior CSF stories should appear on Storybook UIs on first load.

Screenshots See demo here.

Code snippets configure API is called right before AppRegistry.registerComponent. The first argument function does not need to execute anything to trigger the bug:

import {AppRegistry} from 'react-native';
import Storybook from './storybook';
import {configure} from '@storybook/react-native';

configure(() => {}, module);

AppRegistry.registerComponent('myapp', () => Storybook);

System:

% npx -p @storybook/cli@next sb info

Environment Info:

  System:
    OS: macOS 13.6
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.3.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Safari: 17.0
  npmPackages:
    @storybook/addon-actions: 6.5.16 => 6.5.16
    @storybook/addon-links: 6.5.16 => 6.5.16
    @storybook/addon-ondevice-actions: 6.5.6 => 6.5.6
    @storybook/addon-storyshots: 6.5.16 => 6.5.16
    @storybook/addons: 6.5.16 => 6.5.16
    @storybook/cli: 6.5.16 => 6.5.16
    @storybook/core-common: 6.5.16 => 6.5.16
    @storybook/react-native: 6.5.6 => 6.5.6
    @storybook/react-native-server: 6.5.6 => 6.5.6

[dannyhw]

@flochtililoch the configure function gets called in the generated code inside storybook.requires.js and shouldn't be directly called in your code.

[flochtililoch]

@dannyhw Interesting, I've had this code configured this way since our first install of storybook 6 years ago, I must have missed this during my latest migration, though I don't remember this being called out on the migration steps. Is the intention for configure to be called only once and by storybook.requires only?

[dannyhw]

@flochtililoch yes it's intended because now we generate your imports and configure should never be called twice otherwise it would cause those weird behaviours. This will enable some cool changes in v7 too.

In the official blog for the release the first step does briefly mention removing the configure call but perhaps its not super clear https://storybook.js.org/blog/storybook-for-react-native-6-5/

[flochtililoch]

Great, thanks for the insights! This was a bit of a pickle and I'm glad I'm now past this issue. I wonder if it would make sense to emit a warning when configure is called more than once (as it was in my case), which could help future devs who are upgrading older projects. Will close this issue for now.