storybookjs / react-native

📓 Storybook for React Native!
https://storybook.js.org
MIT License
996 stars 141 forks source link

Removing demo component from causes issues #523

Closed Polombo98 closed 8 months ago

Polombo98 commented 8 months ago

Describe the bug When removing "stories" folder from ".storybook" and changing stories field in main.js to "stories: ['../src/*/.stories.?(ts|tsx|js|jsx)']" - the app blows up with "Unable to load story 'mybutton--basic'" error, even tho the stories being regenerated. I could clearly see that I'm not pointing to the story anymore. I've tried clearing the cache, rerunning machine, and reinstalling all dependencies without success unfortunately

To Reproduce Steps to reproduce the behavior:

  1. Go to existing react-native project
  2. run npx sb@latest init --type react_native on Terminal
  3. change main.js in .storybook folder to look like this module.exports = { stories: ['../src/**/*.stories.?(ts|tsx|js|jsx)'], addons: [ '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-actions', ], };
  4. Remove stories folder
  5. See the error

Expected behavior The error does not appear.

Screenshots

image

Code snippets storybook.requires.js: ` do not change this file, it is auto generated by storybook. */

import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators, } from "@storybook/react-native";

global.STORIES = [ { titlePrefix: "", directory: "./src", files: "*/.stories.?(ts|tsx|js|jsx)", importPathMatcher: "^\.\\/.)?)\/|\/|$)(?!\.)(?=.)[^/]?\.stories\.(?:ts|tsx|js|jsx)?)$", }, ];

import "@storybook/addon-ondevice-controls/register"; import "@storybook/addon-ondevice-actions/register";

import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs";

import { decorators, parameters } from "./preview";

if (decorators) { if (DEV) { // stops the warning from showing on every HMR require("react-native").LogBox.ignoreLogs([ "'clearDecorators' is deprecated and will be removed in Storybook 7.0", ]); } // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185 clearDecorators(); decorators.forEach((decorator) => addDecorator(decorator)); }

if (parameters) { addParameters(parameters); }

try { argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer)); } catch {}

const getStories = () => { return { "./src/screens/DiagnosisAndTreatmentPlan/components/Rate/index.stories.tsx": require("../src/screens/DiagnosisAndTreatmentPlan/components/Rate/index.stories.tsx"), }; };

configure(getStories, module, false);`

System: Storybook Environment Info:

System: OS: macOS 13.4.1 CPU: (8) arm64 Apple M1 Pro Shell: 5.9 - /bin/zsh Binaries: Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm <----- active Browsers: Chrome: 118.0.5993.117 Safari: 16.5.2 npmPackages: @storybook/addon-actions: 6.5.16 => 6.5.16 @storybook/addon-controls: 6.5.16 => 6.5.16 @storybook/addon-ondevice-actions: 6.5.7 => 6.5.7 @storybook/addon-ondevice-controls: 6.5.7 => 6.5.7 @storybook/react-native: 6.5.7 => 6.5.7

dannyhw commented 8 months ago

You should be able to dismiss the error and as soon as you select another story you'll stop getting the error. This happens because the previous story is stored in async storage.

Make sure you are regenerating the requires file after changing the config.

I will try to change this in future versions to not error but the app should still be usable

Polombo98 commented 8 months ago

@dannyhw I’m getting the error before any UI is built, so I’m seeing splash screen and not being prompted Also I removed the packages, which should update the store as far as I know?

Polombo98 commented 8 months ago

Ok I've cleared async storage and it's not throwing error anymore, so I'll close the issue @dannyhw Thanks for your answer, but it would be great if we would have some kind of error message about the case