[Bug]: Adding a decorator breaks Show Code view

[MarcusNotheis]

Describe the bug

When adding a decorator in the Preview file, the Show Code view in the Docs View is breaking.

Show Code without Decorator:

Show Code with Decorator:

Instead of showing the component name with computed args, <No Display Name /> is shown.

To Reproduce

Repo: https://github.com/MarcusNotheis/sb-code-repro
Deployed: https://marcusnotheis.github.io/sb-code-repro/?path=/docs/example-button--docs

To reproduce:

1. Install dependencies with yarn
2. Start Storybook with yarn storybook and open the Button Docs story.
3. Expand the Show Code Panel and see the error.
4. Optional: Remove the decorators array from the preview file, then the Show Code panel is displayed correctly:
   https://github.com/MarcusNotheis/sb-code-repro/blob/5f94ba62da2083cc89c30ba5122192a10fee1fe3/.storybook/preview.tsx#L27

System

System:
    OS: macOS 13.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 18.14.1 - ~/.nvm/versions/node/v18.14.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.1/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.14.1/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Edge: 110.0.1587.63
    Firefox: 110.0
    Safari: 16.3
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.61 => 7.0.0-beta.62 
    @storybook/addon-interactions: ^7.0.0-beta.61 => 7.0.0-beta.62 
    @storybook/addon-links: ^7.0.0-beta.61 => 7.0.0-beta.62 
    @storybook/blocks: ^7.0.0-beta.61 => 7.0.0-beta.62 
    @storybook/react: ^7.0.0-beta.61 => 7.0.0-beta.62 
    @storybook/react-vite: ^7.0.0-beta.61 => 7.0.0-beta.62 
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1

Additional context

No response

[valentinpalkovic]

Hi @MarcusNotheis

Could you try to set the following code in your .storybook/preview.tsx:

export const parameters = {
  docs: {
    source: {
      excludeDecorators: true,
    },
  },
};

This excludes the decorators from the Show Code view. Does this workaround solve your problem until the issue is fixed?

[MarcusNotheis]

Thanks for your suggestion @valentinpalkovic!
Adding this parameter resolves the issue for me.

[MarcusNotheis]

Hi @shilman,
is this issue really resolved? The workaround @valentinpalkovic proposed is working absolutely fine for me, but is it really the desired behavior to show <No Display Name /> in the code view when using a decorator without the workaround?

[roymrinmoy]

I have the same issue but only when I am doing something like the following:

{/** When passing props like below, includes the decorator code */}
 <Story
    {...context}
    args={{ ...context.args, animationTriggerRef: buttonRef }}
/>

{/** Without passing any props, works as expected */}
<Story />

Full context:

export const TriggerWithRef = {
  args: {
    className: "h-10 w-10",
    animationTriggerEvent: "hover",
  },
  parameters: {
    controls: { exclude: ["animate"] },
  },
  decorators: [
    (Story, context) => {
      const buttonRef = useRef();
      return (
        <div>
          <button className="mb-5" ref={buttonRef}>
            hover me
          </button>
          <Story
            {...context}
            args={{ ...context.args, animationTriggerRef: buttonRef }}
          />
        </div>
      );
    },
  ],
};

Adding parameters.docs.source.excludeDecorators = true in .storybook/preview.js didn't help either.

[guillaume-g]

I have exactly the same issue as @roymrinmoy (same code almost) and doing the idea of @valentinpalkovic also didn't fix the issue.

When changing the args from a Story in a decorator, it breaks the show code.

[tmeasday]

This issue is a duplicate of #21649. In summary:

1. The fact that you can't see "inside" decorators is a fairly fundamental issue that we worked around by moving the JSX decorator to the end of the decorator chain: React: Don't show decorators in JSX snippets #21907
2. The fact that the StoryFn element (passed to a decorator) is rendered as <No Display Name /> is unfortunate, and we'd take a PR to fix it, but due to 1. the fix isn't really going to help much.
3. @roymrinmoy's issue is [Bug]: Adding arguments in the decorator breaks the source code #22127, which I believe is already fixed! 🤞

[pedroleitaogls]

For anyone encountering a similar issue when using @storybook/angular I have opened this issue #25147.