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:

1. 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.

[shilman]

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

1. convert all export function Foo to export const Foo =
2. 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.

[aaronmcadam]

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.