[Bug]: Code of React components showing as <forwardRef>

[felipefialho]

Describe the bug

I'm using the generated React components of Stencil Output React inside a Storybook instance running with React, everything works perfectly but when I click to check the component code it appears as follows:

<forwardRef>
  Button
</forwardRef>

The correct view should be:

<MyButton>
  Button
</MyButton>

I haven't found anything that could help me with this, especially since these wrappers are automatically generated by the Stencil and I have no way of modifying the output.

Can anyone help me?

To Reproduce

No response

System

Environment Info:
  System:
    OS: macOS 13.2.1
    CPU: (8) x64 Apple M1 Pro
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Firefox: 109.0.1
    Safari: 16.3
  npmPackages:
    @storybook/addon-a11y: ^7.0.1 => 7.0.2 
    @storybook/addon-docs: ^7.0.1 => 7.0.7 
    @storybook/addon-essentials: ^7.0.1 => 7.0.7 
    @storybook/addon-mdx-gfm: ^7.0.2 => 7.0.2 
    @storybook/addons: ^7.0.1 => 7.0.2
    @storybook/preset-typescript: ^3.0.0 => 3.0.0 
    @storybook/react: ^7.0.7 => 7.0.7 
    @storybook/react-webpack5: ^7.0.1 => 7.0.7 
    @storybook/theming: ^7.0.1 => 7.0.2

Additional context

[tassioFront]

I got the same

[Prasad-mutnale]

@felipefialho I want to work on this issue. i can solve this issue please assign me.

[binomialstew]

You might be able to get the component name to display correctly in the story source by setting Component.displayName in the story.

[yannbf]

Hey @felipefialho thanks for reporting the issue. It will be fixed in the next patch release of Storybook 8!

Antes tarde do que nunca 🤞!

[plemesle]

storybook 8.3.2 is out, and issue is still here right ?

[yannbf]

@plemesle the fix for this issue was released back in Storybook 8.0.4 #26592
please share a reproduction if you are still experiencing the issue, we can take a look then, perhaps it's a slightly different scenario!

[mdedwards09]

I'm on storybook version 8.3.6. In our case, we are using a component imported directly from MUI in our stories. If we wrap the component and use the wrapped one in storybook, we see what we are looking for, otherwise we see <React.ForwardedRef...

our implementation is basically this:

import { Button } from '@mui/material';
...
export const SingleButton: Story = {
  render: (args) => <Button {...args}>Single Button</Button>,
};

Our code snippet looks like so:

<React.ForwardRef
  endIcon=""
  size="medium"
  startIcon=""
  variant="contained"
>
  Single Button
</React.ForwardRef>

[JBassx]

Issue is still here!

[VietNguyenQuoc]

Please reopen as the issue still exists in 8.4.7

[Syden10]

@yannbf could you please reopen this?

Issue is still present on latest, exact same scenario described by @mdedwards09
Thanks.