storybook: Source-loader: Breaks when stories reference other stories before they are defined

Describe the bug waring: @storybook/source-loader was applied to a file which does not contain a story. Please check your webpack configuration and make sure to apply @storybook/source-loader only to files containg stories. Related file:"

To Reproduce Steps to reproduce the behavior:

run is repo

Expected behavior no waring

Screenshots

Code snippets

export function AllButton() {
  return (
    <>
      <DefaultButton />
      <PrimaryButton />
      <SuccessButton />
    </>
  );
}

export function DefaultButton() {
  return (
    <Button
      onClick={action("clicked")}
      text={text("Default Button", "Default Button")}
    />
  );
}

export function PrimaryButton() {
  return (
    <Button
      onClick={action("clicked")}
      text={text("Primary Button", "Primary Button")}
      type="primary"
    />
  );
}

export function SuccessButton() {
  return (
    <Button
      onClick={action("clicked")}
      text={text("Success Button", "Success Button")}
      type="success"
    />
  );
}

System:

Environment Info:

  System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 13.12.0 - ~/.nvm/versions/node/v13.12.0/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v13.12.0/bin/npm
  Browsers:
    Chrome: 80.0.3987.163
    Safari: 13.1
  npmPackages:
    @storybook/addon-actions: ^5.3.18 => 5.3.18
    @storybook/addon-console: ^1.2.1 => 1.2.1
    @storybook/addon-docs: ^5.3.18 => 5.3.18
    @storybook/addon-knobs: ^5.3.18 => 5.3.18
    @storybook/addon-links: ^5.3.18 => 5.3.18
    @storybook/addon-notes: ^5.3.18 => 5.3.18
    @storybook/addons: ^5.3.18 => 5.3.18
    @storybook/preset-create-react-app: ^2.1.1 => 2.1.1
    @storybook/react: ^5.3.18 => 5.3.18

Additional context Add any other context about the problem here.

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 9
Comments: 21 (7 by maintainers)

Most upvoted comments

I’m able to repro in the original repo. How I worked around it:

convert all export function Foo to export const Foo =
move the All story to the end of the file so that it is defined AFTER the stories it references

I’m seeing even worse behavior in 6.0-beta. Renaming the issue and calling this a bug.

shilman on Jun 11, 2020

I’m using beta.29 and I have defined all of my components before referencing them:

/* eslint-disable import/no-default-export */
import { CSSReset, ThemeProvider } from '@chakra-ui/core';
import React from 'react';
import { CreateNewKeyForm } from './CreateNewKeyForm';
import { LocalisationsListing } from './LocalisationsListing';
import { LocalisationsScreen } from './LocalisationsScreen';

export default {
  title: 'LocalisationsScreen',
  component: LocalisationsScreen,
  decorators: [
    (story: any) => (
      <ThemeProvider>
        <CSSReset />
        {story()}
      </ThemeProvider>
    ),
  ],
};

export const Default = () => {
  return <LocalisationsScreen />;
};

export const Form = () => {
  return <CreateNewKeyForm />;
};

export const EmptyListing = () => {
  return <LocalisationsListing localisations={[]} />;
};

export const PopulatedListing = () => {
  const localisations = [
    {
      keyName: 'a_key',
      copy: 'a value',
    },
  ];

  return <LocalisationsListing localisations={localisations} />;
};

I still see the console warning.

aaronmcadam on Jun 16, 2020

Can you try adding this to your export default up top?

includeStories: []

I was getting both this warning and “story with id already exists in store” warnings. I added that per https://github.com/storybookjs/storybook/blob/master/addons/docs/docs/recipes.md#csf-stories-with-mdx-docs and both types of warnings disappeared for me. Might be worth a shot.

mariasereno-png on May 11, 2020

According to official-storybook/tooltip-listitem–all. Waring will solved if I update code snippets like this:

const DefaultButtonResuse = () => {
  return (
    <Button
      onClick={action("clicked")}
      text={text("Default Button", "Default Button")}
    />
  );
};

const PrimaryButtonResuse = () => {
  return (
    <Button
      onClick={action("clicked")}
      text={text("Primary Button", "Primary Button")}
      type="primary"
    />
  );
};

const SuccessButtonResuse = () => {
  return (
    <Button
      onClick={action("clicked")}
      text={text("Success Button", "Success Button")}
      type="success"
    />
  );
};

export const AllButton = () => {
  return (
    <>
      <DefaultButtonResuse />
      <PrimaryButtonResuse />
      <SuccessButtonResuse />
    </>
  );
};

export const DefaultButton = () => <DefaultButtonResuse />;

export const PrimaryButton = () => <PrimaryButtonResuse />;

export const SuccessButton = () => <SuccessButtonResuse />;

That’s a little puzzled! 😔

whatwg6 on Apr 11, 2020

@aaronmcadam yep, same for me; would love to use the new CSF format. I am not a storybook dev so I cant say if this is a known limitation but by how @shilman seems to be surprised, I guess this is indeed a bug.

japrescott on Jun 10, 2020

it seems like the source-loader plugin doesnt support the new CSF story format. Using the old storiesOf().add() works as expected

japrescott on Jun 10, 2020