Question 393998 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Storybook for react cant see my components

When I run my storybook sometimes my components are missing.

example

So I have

"... New folderworkingtestwithpawelsrccomponentsAi4Process_mylib_test2demo.stories.tsx"

But storybook won’t see the file

Here is my .storybook/main.js which defines where to look for stories.

/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const config = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: {
    name: '@storybook/react-webpack5'
  },
  docs: {
    autodocs: 'tag'
  }
};
export default config;

What do I need to do to fix it so storybook sees my components?

I’m still unable to get storybook to see my component but could the error be due to this seeming to hang?

pos source of error

Tags:

2

Answers


  1. 0

    I was able to pull the repository on my computer (a Mac) and see the story without changing anything, which means the configuration is correct. Here are a few hypotheses on why it might not be working in your case:

    1. Corrupted Node modules:

      • Try deleting the node_modules directory in your project.
      • Remove package-lock.json.
      • Run npm install again.

    2. Legacy Node runtime:

      • Current supported NodeJS versions are v18 and above. I tested both Node 18 and Node 20 with your example, and both worked correctly.
      • You can download and install Node 20 from NodeJS, then:
        1. Remove node_modules and package-lock.json.
        2. Run npm install again to see if the updated Node version resolves the issue.

    3. Windows file system:

      • This might be harder to troubleshoot if your configuration works on Mac/Linux but not on Windows.
      • The longest path name allowed in Windows is around 256 characters in some Windows settings. This length includes both the folder and file names, so if the file is deep in the folder structure, it might exceed this limit.
      • Start by renaming the component and story with shorter names.
      • Move your project folder up in the file system so the total path length is shorter.
    Login or Signup to reply.
  2. 0

    Your Storybook configuration seems mostly correct, but the issue might lie in the way paths are specified or the structure of your project. Here are a few things you can check and try to resolve the issue:

    1. Ensure that the path in your stories configuration is correct and matches the actual file path.

    2. Ensure that there are no discrepancies in the folder names and their capitalisation

    3. Sometimes, Storybook may cache previous configurations. Clearing the cache might help.

      npx storybook –no-manager-cache

    4. Ensure all Storybook dependencies are compatible and up-to-date. Sometimes issues arise from version mismatches.

    5. Add the exact path of the story file to the stories array in your .storybook/main.js file to see if it makes a difference.

    const config = {
  stories: [
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
    '../src/components/Ai4Process_mylib_test2/demo.stories.tsx'
  ],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: {
    name: '@storybook/react-webpack5'
  },
  docs: {
    autodocs: 'tag'
  }
};
export default config;
    1. Ensure your demo.stories.tsx file is correctly set up as a Storybook story. Here’s a basic example structure for a story file:
    import React from 'react';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { MyComponent } from './MyComponent';

export default {
  title: 'Example/MyComponent',
  component: MyComponent,
} as ComponentMeta<typeof MyComponent>;

const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  // your props here
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search