storybook: [Bug]: The `Primary` doc block in an attached MDX file shows invalid code preview

Describe the bug

I’m seeing invalid code previews when using the Primary doc block and clicking “Show code”:

import {
  Meta,
  Primary,
} from "@storybook/blocks";

import * as ButtonStories from "./Button.stories.js";

<Meta of={ButtonStories} />

<Primary />
CleanShot 2023-02-16 at 15 52 42@2x

When relying on autodocs, the docs page generated for each component shows the correct JSX in the code preview. But when I add an MDX file and attach that file to a component using the Meta block, none of the code previews work (the example above is for the Primary block, but I’m also seeing the same error on the Canvas block when using <Canvas of={ButtonStories.Primary} />).

To Reproduce

See reproduction repo: https://github.com/elisehein/storybook7-primary-block-code-preview

See README for steps to reproduce, or have a look at the problematic file https://github.com/elisehein/storybook7-primary-block-code-preview/blob/main/src/stories/Button.mdx?plain=1

The repro was created using npx sb@next init

System

Environment Info:

  System:
    OS: macOS 12.6.3
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.17.1 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.15.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 110.0.5481.96
    Firefox: 109.0.1
    Safari: 15.6.1
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.47 => 7.0.0-beta.47
    @storybook/addon-interactions: ^7.0.0-beta.47 => 7.0.0-beta.47
    @storybook/addon-links: ^7.0.0-beta.47 => 7.0.0-beta.47
    @storybook/blocks: ^7.0.0-beta.47 => 7.0.0-beta.47
    @storybook/react: ^7.0.0-beta.47 => 7.0.0-beta.47
    @storybook/react-webpack5: ^7.0.0-beta.47 => 7.0.0-beta.47
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1

Additional context

In my own codebase I was able to fix one particular instance of this by replacing const Default = {}; export { Default as ComponentName } in my stories file with export const Default = {}. (See Discord) I wasn’t able to reproduce this here.

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 18 (11 by maintainers)

Most upvoted comments

@ndelangen apologies for the delay.

I’ve just upgraded to the stable release of 7 and this issue is fixed for me 🥳

I found the bug! Will open a PR soon 🎉

Ooh-la-la!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.53 containing PR #21161 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease