Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Template app generates invalid storybook.requires.js story path #444

Closed
Jankku opened this issue Mar 22, 2023 · 5 comments
Closed

Template app generates invalid storybook.requires.js story path #444

Jankku opened this issue Mar 22, 2023 · 5 comments

Comments

@Jankku
Copy link

Jankku commented Mar 22, 2023

Describe the bug
Running npm run storybook-generate generates storybook.requires.js file with invalid story path.

To Reproduce
Steps to reproduce the behavior:

  1. Run npx create-expo-app --template expo-template-storybook AwesomeStorybook
  2. cd AwesomeStorybook
  3. Run npm run storybook-generate
  4. Run npm run storybook:android

Output of npm run storybook:android:

Android Bundling failed 609ms
Unable to resolve "..componentsButtonButton.stories.tsx" from ".ondevice\storybook.requires.js"

Expected behavior
The application should start correctly.

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: "./components",
    files: "**/*.stories.?(ts|tsx|js|jsx)",
    importPathMatcher:
      "^\\.[\\\\/](?:components(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
  },
];

import "@storybook/addon-ondevice-controls/register";
import "@storybook/addon-ondevice-actions/register";
import "@storybook/addon-ondevice-backgrounds/register";
import "@storybook/addon-ondevice-notes/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 {
    "./componentsButtonButton.stories.tsx": require("..componentsButtonButton.stories.tsx"),
  };
};

configure(getStories, module, false);

System:

Environment Info:

  System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 4800U with Radeon Graphics
  Binaries:
    Node: 18.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.5.0 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.8.0 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1413.0), Chromium (111.0.1661.44)
  npmPackages:
    @storybook/addon-actions: ^6.5.16 => 6.5.16
    @storybook/addon-controls: ^6.5.16 => 6.5.16
    @storybook/addon-essentials: ^6.5.16 => 6.5.16
    @storybook/addon-links: ^6.5.16 => 6.5.16
    @storybook/addon-ondevice-actions: 6.5.0-rc.6 => 6.5.0-rc.6
    @storybook/addon-ondevice-backgrounds: 6.5.0-rc.6 => 6.5.0-rc.6
    @storybook/addon-ondevice-controls: 6.5.0-rc.6 => 6.5.0-rc.6
    @storybook/addon-ondevice-notes: 6.5.0-rc.6 => 6.5.0-rc.6
    @storybook/addon-react-native-web: ^0.0.19 => 0.0.19
    @storybook/builder-webpack5: ^6.5.14 => 6.5.16
    @storybook/manager-webpack5: ^6.5.14 => 6.5.16
    @storybook/react: ^6.5.16 => 6.5.16
    @storybook/react-native: 6.5.0-rc.6 => 6.5.0-rc.6

Additional context
After manually editing storybook.requires.js to correct paths the application works:

// ...
const getStories = () => {
  return {
    "./components/Button/Button.stories.tsx": require("../components/Button/Button.stories.tsx"),
  };
};
// ...
@dannyhw
Copy link
Member

dannyhw commented Mar 22, 2023

@Jankku can you add your main.js file contents here? or is it unchanged?

@dannyhw
Copy link
Member

dannyhw commented Mar 22, 2023

when I run the same commands I get

 "./components/Button/Button.stories.tsx": require("../components/Button/Button.stories.tsx"),

Is it possible that this is windows specific?

@dannyhw
Copy link
Member

dannyhw commented Mar 23, 2023

@Jankku I found the problem and I'll push a fix asap

@dannyhw
Copy link
Member

dannyhw commented Mar 23, 2023

@Jankku please can you try the version 6.5.0-rc.7

@Jankku
Copy link
Author

Jankku commented Mar 28, 2023

Hi, sorry for the late reply. Version 6.5.0-rc.7 indeed fixes the issue. Thank you!

@Jankku Jankku closed this as completed Mar 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants