Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Code in MDX Stories that are not one-liners does not load the story in storybook #16643

Closed
wiktoriavh opened this issue Nov 9, 2021 · 2 comments

Comments

@wiktoriavh
Copy link

wiktoriavh commented Nov 9, 2021

Describe the bug
Writing a story like this does not work

<Canvas>
  <Story name="Dialog">
    {() => {
      const { setState } = useDialogContext();
      const handleClick = () => {
        setState(true);
      };

      return (
        <div>
          <button onClick={handleClick}>Open Dialog</button>
          <MyDialog />
        </div>
      );
    }}
  </Story>
</Canvas>

But writing it like this, as a one-liner, works.

<Canvas>
  <Story name="Dialog">
    {() => {
      const { setState } = useDialogContext();
      const handleClick = () => setState(true);
      return (
        <div>
          <button onClick={handleClick}>Open Dialog</button>
          <MyDialog />
        </div>
      );
    }}
  </Story>
</Canvas>

To Reproduce
https://github.com/Braweria/sb-mdx-story-issue
Clone the repo, go to Dialog.stories.mdx and change handleClick to be on several lines, then the story will no longer load.

System

Environment Info:

  System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
  Binaries:
    Node: 14.15.4 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.10 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 95.0.4638.69
    Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.44)
  npmPackages:
    @storybook/addon-actions: ^6.3.12 => 6.3.12
    @storybook/addon-essentials: ^6.3.12 => 6.3.12
    @storybook/addon-links: ^6.3.12 => 6.3.12
    @storybook/node-logger: ^6.3.12 => 6.3.12
    @storybook/preset-create-react-app: ^3.2.0 => 3.2.0
    @storybook/react: ^6.3.12 => 6.3.12

Additional context
Written in MDX.
Video: https://www.loom.com/share/3313b001c2814d668abe1411d131010b
Edit: There is actually a mistake in the video where copilot filled it out as setState(!state) instead of setState(true), but regardless of that, the issue is still there.
image

@shilman
Copy link
Member

shilman commented Nov 9, 2021

Try removing the newline here:

      };

      return (

@shilman
Copy link
Member

shilman commented Nov 9, 2021

closing as dupe to #7902

@shilman shilman closed this as completed Nov 9, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants