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

Can confirm this is happening on forwarded refs with .displayName set after upgrading to Storybook 8.

Adding displayName to the component showed me the correct thing in the storybook for me

Button.displayName = "Button"

Seems like .displayName is now becoming the cause of <[object Object... in v8.

I have the same problem after migrating to 8. Here is a simple example from storybook.

const meta: Meta<typeof Button> = {
  component: Button,
  //👇 Enables auto-generated documentation for the component story
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    variant: "default",
  },
};

Here it is the auto docs output inside the code section. <[object Object] variant="default" />

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

In all stories with arguments for controls, as in the example, we still have the problem after the update.

It’s indeed the displayName that is causing the issue. Removing it works fine but there is obviously a bug or does the V8 implement it with custom Storybook logic based on the imported component name ? I’ve seen no motion of that in the migration guide.

It should not be the case because we must keep the posibility to add the displayName for devtools DOM support for example in some cases.

Indeed, having the same issue after upgrading to Storybook 8 from rc.3. Both with and without reactDocgen: "react-docgen-typescript", using webpack

Replicated with default npx create-next-app@latest and npx storybook@latest init

tested with and without (because docgen still doesnt support forwardRef) : main.ts

  typescript: {
    reactDocgen: "react-docgen-typescript",
  }

Using Storybook Example Button.tsx

/**
 * Primary UI component for user interaction
 */
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (
    { primary = false, size = "medium", backgroundColor, label, ...props },
    ref
  ) => {
    const mode = primary
      ? "storybook-button--primary"
      : "storybook-button--secondary";
    return (
      <button
        ref={ref}
        type="button"
        className={["storybook-button", `storybook-button--${size}`, mode].join(
          " "
        )}
        {...props}
      >
        {label}
        <style jsx>{`
          button {
            background-color: ${backgroundColor};
          }
        `}</style>
      </button>
    );
  }
);

Button.displayName = "Button";

Hey @shilman

So things get a little weird… I setup three identical buttons components. The only differences are

NoForwardRefButton

export const NoForwardRefButton = function (
  { className, variant, size, asChild = false, ...props }: ButtonProps
) {/*...*/};

ForwardRefNoDisplayNameButton

export const ForwardRefNoDisplayNameButton = forwardRef(function (
  { className, variant, size, asChild = false, ...props }: ButtonProps,
  ref: ForwardedRef<HTMLButtonElement>,
) {/*...*/});

ForwardRefWithDisplayNameButton

export const ForwardRefWithDisplayNameButton = forwardRef(function (
  { className, variant, size, asChild = false, ...props }: ButtonProps,
  ref: ForwardedRef<HTMLButtonElement>,
) {/*...*/});

ForwardRefWithDisplayNameButton.displayName = 'MyForwardRefWithDisplayNameButton';

I then ran the build with the default options and then with react-docgen-typescript

react-docgen

NoForwardRefButton ForwardRefNoDisplayNameButton ForwardRefWithDisplayNameButton

react-docgen-typescript

NoForwardRefButton ForwardRefNoDisplayNameButton ForwardRefWithDisplayNameButton

I just did a stackblitz to check if it’s still the case in 8.1 alpha, and it is - https://stackblitz.com/edit/github-umceda?file=src%2Fstories%2FButton.tsx,.storybook%2Fmain.ts&preset=node