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

[mririgoyen]

Describe the bug

In Storybook v8, when creating a story in CSF format, the source code shown does not include the name of the component, but rather [object Object].

To Reproduce

export const MaxLines: Story = {
  args: {
    children: `This is some content to render.`,
    variant: 'body1',
  },
  name: 'Basic typography',
  parameters: {
    docs: {
      canvas: {
        sourceState: 'shown',
      },
    },
  },
};

Outputs:

<[object Object]
  variant="body1"
>
  This is some content to render.
</[object Object]>

System

Storybook Environment Info:

  System:
    OS: macOS 14.3
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    npm: 10.2.5 - ~/.nvm/versions/node/v18.19.0/bin/npm <----- active
  Browsers:
    Chrome: 122.0.6261.128
    Edge: 122.0.2365.80
    Safari: 17.3
  npmPackages:
    @storybook/addon-a11y: ^8.0.0 => 8.0.0 
    @storybook/addon-coverage: ~1.0.1 => 1.0.1 
    @storybook/addon-designs: ~8.0.0 => 8.0.0 
    @storybook/addon-essentials: ^8.0.0 => 8.0.0 
    @storybook/addon-interactions: ^8.0.0 => 8.0.0 
    @storybook/addon-links: ^8.0.0 => 8.0.0 
    @storybook/addon-themes: ~8.0.0 => 8.0.0 
    @storybook/blocks: ^8.0.0 => 8.0.0 
    @storybook/manager-api: ^8.0.0 => 8.0.0 
    @storybook/nextjs: ^8.0.0 => 8.0.0 
    @storybook/react: ^8.0.0 => 8.0.0 
    @storybook/test: ^8.0.0 => 8.0.0 
    @storybook/test-runner: ^0.17.0 => 0.17.0 
    @storybook/theming: ^8.0.0 => 8.0.0 
    chromatic: ~11.0.8 => 11.0.8 
    eslint-plugin-storybook: ~0.8.0 => 0.8.0 
    storybook: ^8.0.0 => 8.0.0

Additional context

Was working before the upgrade to v8.

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