CODEWITHSUNDEEP
javascripttypescriptstorybook
Jimmy
Jimmy

Reputation: 3880

Unable to import components into storybook

I am having trouble getting my first storybook to work. I am using the latest storybook version and configuration, and ran npx sb init to do so, as documented here.

The following story file will run fine:

SampleComponent.stories.tsx:

import React from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import { Meta } from '@storybook/react/types-6-0';
// eslint-disable-next-line import/no-extraneous-dependencies
import SampleComponent from './SampleComponent';

export const Foo: React.FC = () => <SampleComponent />;

export default {
  title: 'Testing',
  component: Foo,
} as Meta;

however, the following storybook does not work and I get an empty storybook instead. I also get the console message:

Found a story file for "Testing" but no exported stories.

SampleComponent.stories.tsx:

import React from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import { Meta } from '@storybook/react/types-6-0';
// eslint-disable-next-line import/no-extraneous-dependencies
import SampleComponent from './SampleComponent';

export default {
  title: 'Testing',
  component: SampleComponent,
} as Meta;

Why am I not able to import the SampleComponent directly into my default export?

.storybook/main.js:

module.exports = {
  "stories": [
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}

SampleComponent.tsx:

import React from 'react';

const SampleComponent: React.FC = () => <h1>Hello World</h1>;

export default SampleComponent;

file strcuture:

src/
  - components/
    - SampleComponent/
      - SampleComponent.tsx
      - SampleComponent.stories.tsx

Upvotes: 3

Views: 3879

Answers (1)

J&#233;r&#233;mie B
J&#233;r&#233;mie B

Reputation: 11032

A stories file should export stories, as named export. Your second example doesn't export any stories.

You can add :

export MyStory = () => <SampleComponent/>

or export directory SampleComponent, but it's probably not a good idea: you will probably use args, parameters and others.

Upvotes: 1

Related Questions