[Bug]: Story source is showing `[object Object]` instead of the component name about storybook

[mririgoyen]

More Info

Trying to use the render function causes similiar behavior.

Story:

export const Usage: Story = {
  name: 'Usage',
  render: (args) => (
    <div className="flex flex-col gap-4">
      <Typography variant="hero">Hero</Typography>
    </div>
  ),
};

Output:

<div className="flex flex-col gap-4">
  <[object Object] variant="hero">
    Hero
  </[object Object]>
</div>

[kasperpeulen]

@mririgoyen Could you check if you can reproduce this issue in 8.0.0-rc.3? Might be that this bug is introduced in 8.0.0-rc.4

[0x00000001A]

I'm using the 8.0.0 version and experiencing the same issue.
Every story produces [Object object] instead of a component name. The strange thing is that if I remove the displayName property by delete MyButton.displayName somewhere before the story meta declaration, everything works ok.

I have tried webpack and vite builders, and there is no difference.

import UpButton from './UpButton'
import {UpButtonProps} from './UpButton.type'

delete UpButton.displayName

const UpButtonStories: Meta<UpButtonProps> = {
  title: 'Buttons/UpButton',
  component: UpButton,
  tags: ['autodocs']
}

[mririgoyen]

@mririgoyen Could you check if you can reproduce this issue in 8.0.0-rc.3? Might be that this bug is introduced in 8.0.0-rc.4

Pinning to 8.0.0-rc.3 does not resolve the issue.

EDIT: I've stepped down all the way to rc.1 and the issue is always there.

[flobiwankenobi]

Looks like this issue relates to #20920

[yannbf]

Hey everyone! This issue is solved in #26566 and will be released soon. Thanks for your patience 🙏