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

[whatwg6]

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]

try using the syntax:

export const X = () => ...

instead of:

export function X() { ... }

[whatwg6]

try using the syntax:

export const X = () => ...

instead of:

export function X() { ... }

Update syntax below，still waring！

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

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

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

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

[whatwg6]

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! 😔

[shilman]

That's pretty strange. Any interest in trying to debug this? There are test cases in: https://github.com/storybookjs/storybook/blob/next/lib/source-loader/src/abstract-syntax-tree/inject-decorator.test.js

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[mariasereno-png]

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.

[whatwg6]

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.

Still can't solve

[aaronmcadam]

Adding includeStories: [] for me means that no stories are being rendered.

[japrescott]

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

[aaronmcadam]

@japrescott That's a shame. I'd rather not have to revert to the old story format because I find CSF so much easier to use.

[japrescott]

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

[aaronmcadam]

@japrescott I've reopened the issue, so hopefully, somebody more familiar with source-loader can pick this up.

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

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[aleph-naught2tog]

That's a little puzzled! 😔

This is also the only solution that worked for me. 😐

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[danielo515]

I'm also seeing this warning on storybook version 5

This is my story:

//@flow
import React from 'react'
import LinkTo from '@storybook/addon-links/react'
import UserBadge from '../UserBadge'

import Sidebar, { SidebarItem, SidebarMenu, SubmenuItem } from './'

export default {
  title: 'Sidebar',
  component: Sidebar,
  parameters: {
    options: { showPanel: false },
    info: {
      inline: true,
      header: false,
      styles: {
        infoBody: {
          height: '100vh',
          overflow: 'scroll',
          paddingRight: 0,
          position: 'absolute',
          left: '240px',
          top: 0,
          right: '10px',
        },
      },
    },
  },
}

/**
 * Use the default export to provide interactivity using knobs.
 * It will give a better overview of what the component is capable.
 */
export const Default = ({ active = 'payments' }: { active: string }) => {
  return (
    <Sidebar
      linkComponent={LinkTo}
      header={
        <UserBadge
          name="Cameron"
          surname="Diez"
          linkComponent={'a'}
          imgSrc="https://randomuser.me/api/portraits/women/49.jpg"
          options={[
            {
              icon: 'User',
              label: 'Account',
              href: '#',
            },
            {
              icon: 'CreditCard',
              label: 'Billing',
              href: '#',
            },
            {
              icon: 'InformationCircle',
              label: 'Support',
              href: '#',
            },
            {
              icon: 'Logout',
              label: 'Logout',
              href: '#',
              separator: true,
            },
          ]}
        ></UserBadge>
      }
    >
      <SidebarMenu>
        <SidebarItem
          icon="Calendar"
          story="Payroll Active"
          label="Payroll"
          active={active === 'payroll'}
        ></SidebarItem>
        <SidebarItem
          icon="Users"
          linkComponent={LinkTo}
          story="Users-Active"
          label="Employees"
          active={active === 'employees'}
        ></SidebarItem>
        <SidebarItem
          icon="CreditCard"
          linkComponent={LinkTo}
          story="Default"
          label="Payments"
          active={active === 'payments'}
        ></SidebarItem>
        <SidebarItem
          icon="ChartBar"
          linkComponent={LinkTo}
          story="Reports Active"
          label="Reports"
          active={active === 'reports'}
        ></SidebarItem>
        <SidebarItem
          icon="Library"
          label="Company"
          story="Company Active"
          linkComponent={LinkTo}
          active={active === 'company'}
        >
          <SubmenuItem active={active === 'general'} story="General Active">
            General
          </SubmenuItem>
          <SubmenuItem active={active === 'HMRC'} story="HMRC Active">
            HMRC
          </SubmenuItem>
          <SubmenuItem active={active === 'pension'} story="Pension Active">
            Pension
          </SubmenuItem>
          <SubmenuItem active={active === 'allowance'} story="Allowance Active">
            Allowance
          </SubmenuItem>
        </SidebarItem>
        <SidebarItem
          icon="Cog"
          story="Integrations Active"
          label="Integrations"
          linkComponent={LinkTo}
        ></SidebarItem>
      </SidebarMenu>
    </Sidebar>
  )
}
export const UsersActive = () => <Default active="employees" />

export const CompanyActive = () => <Default active="company" />
export const PayrollActive = () => <Default active="payroll" />
export const ReportsActive = () => <Default active="reports" />
export const GeneralActive = () => <Default active="general" />
export const IntegrationsActive = () => <Default active="HMRC" />
export const HMRCActive = () => <Default active="HMRC" />
export const PensionActive = () => <Default active="pension" />
export const AllowanceActive = () => <Default active="Allowance" />

[danielo515]

Now that I re-read the title this may not be my problem. I am not referencing the stories before they are defined, so it must be some other kind of bug

[sivaraj-v]

Any update on this ?

Module parse failed: Unexpected token (23:4)
File was processed with these loaders:
 * ./node_modules/@storybook/source-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
|   const isBlockEnabled = block ? StyleConfig.button.block : [];
|   return (
>     <React.Fragment>
|       <Button
|         onClick={action('clicked')}

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!