[Bug]: Using typescript: "react-docgen-typescript" breaks source preview

[adrianaferrugento]

Describe the bug

Using the following in my main config breaks the preview source code.

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

To Reproduce

https://stackblitz.com/edit/github-cuvfy3?file=.storybook%2Fmain.ts

System

My local system info


Storybook Environment Info:

  System:
    OS: macOS 14.4
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 8.15.4 - ~/.nvm/versions/node/v20.11.1/bin/pnpm <----- active
  Browsers:
    Chrome: 122.0.6261.129
    Safari: 17.4
  npmPackages:
    @storybook/addon-a11y: 8.0.0 => 8.0.0
    @storybook/addon-docs: 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-mdx-gfm: 8.0.0 => 8.0.0
    @storybook/addon-themes: 8.0.0 => 8.0.0
    @storybook/addon-viewport: 8.0.0 => 8.0.0
    @storybook/blocks: 8.0.0 => 8.0.0
    @storybook/core-server: 8.0.0 => 8.0.0
    @storybook/manager-api: 8.0.0 => 8.0.0
    @storybook/preview-api: 8.0.0 => 8.0.0
    @storybook/react: 8.0.0 => 8.0.0
    @storybook/react-vite: 8.0.0 => 8.0.0
    @storybook/react-webpack5: 8.0.0 => 8.0.0
    @storybook/testing-library: 0.2.2 => 0.2.2
    @storybook/theming: 8.0.0 => 8.0.0
    @storybook/types: 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
    storybook-mock-date-decorator: 1.0.1 => 1.0.1

### Additional context

_No response_

[vanessayuenn]

@adrianaferrugento looks like this issue can be mitigated by using react-docgen instead, right?

[ingvaldlorentzen]

@adrianaferrugento looks like this issue can be mitigated by using react-docgen instead, right?

It can, but for me I lose a lot of type details when usingreact-docgen
E.g.
react-docgen

react-docgen-typescript

(this is a Font Awesome SizeProp, just used as an example)

So now I have to choose between better types in the controls, or nice code in the examples, which is a bit of a bummer.

[adrianaferrugento]

@adrianaferrugento looks like this issue can be mitigated by using react-docgen instead, right?

I actually get some errors when I try to use it with my configuration for some reason. I don't think it's a storybook issue because it works in the reproduction link but if anyone has any ideas let me know. Also losing the type details would be a bit annoying so my preferred solution would be to use react-docgen-typescript

[Vempejul]

I am seeing the same issues, just updated from 7.5.2 to 8.0.0 and had to use react-docgen-typescript because I noticed that the automatic argTypes generation for Controls was missing. Unfortunately in doing so the source preview of my components did not show correctly.

/* .storybook/main.ts */
import { dirname, join } from "path";
import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
  framework: {
    name: getAbsolutePath("@storybook/react-vite"),
    options: {},
  },

  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],

  addons: [
    getAbsolutePath("@storybook/addon-links"),
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@storybook/addon-interactions"),
  ],

  docs: {
    autodocs: "tag",
  },

  typescript: {
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      shouldExtractValuesFromUnion: true,
      shouldRemoveUndefinedFromOptional: true,
      propFilter: (prop) => {
        if (prop.declarations !== undefined && prop.declarations.length > 0) {
          const hasPropAdditionalDescription = prop.declarations.find(
            (declaration) => {
              return !declaration.fileName.includes("node_modules");
            }
          );

          return Boolean(hasPropAdditionalDescription);
        }

        return true;
      },
    },
  },

  async viteFinal(config) {
    const { mergeConfig } = await import("vite");

    return mergeConfig(config, {});
  },
};

export default config;

function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, "package.json")));
}

/* Button/index.tsx */
import styles from "./index.module.css";
import { cva, type VariantProps } from "class-variance-authority";

const buttonCVA = cva(styles.base, {
  variants: {
    variant: {
      primary: styles.primary,
      secondary: styles.secondary,
      tertiary: styles.tertiary,
      ghost: styles.ghost,
    },
    buttonTheme: {
      black: styles.themeBlack,
      blue: styles.themeBlue,
      green: styles.themeGreen,
      lilac: styles.themeLilac,
      rose: styles.themeRose,
    },
    icon: {
      left: styles.iconLeft,
      right: styles.iconRight,
      only: styles.iconOnly,
    },
    slim: {
      true: styles.slim,
    },
    squared: {
      true: styles.squared,
    },
    isLoading: {
      true: styles.isLoading,
    },
  },
  defaultVariants: {
    variant: "primary",
    buttonTheme: "green",
  },
});

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonCVA> {}

export const Button = ({
  variant,
  buttonTheme,
  icon,
  slim,
  squared,
  isLoading,
  className,
  children,
  ...props
}: ButtonProps) => {
  return (
    <button
      className={buttonCVA({
        variant,
        buttonTheme,
        icon,
        slim,
        squared,
        isLoading,
        className,
      })}
      {...props}
    >
      {isLoading ? (
        <div className={styles.animationContainer}>
          <svg viewBox={`0 0 32 32`} className={styles.spinnerContainer}>
            <circle r={16} cx={16} cy={16} className={styles.spinner} />
          </svg>
        </div>
      ) : (
        children
      )}
    </button>
  );

/* button.stories.tsx */
import { Button, type ButtonProps } from "@mypackage/button/src";
import { BasketIcon } from "@mypackage/icon/src";

export default {
  component: Button,
};

export const Component = {
  render: ({ children, ...args }: ButtonProps) => (
    <Button {...args}>
      {args?.icon === "only" ? (
        <BasketIcon />
      ) : (
        <>
          {args?.icon === "left" && (
            <BasketIcon style={{ marginRight: "8px" }} />
          )}
          {children}
          {args?.icon === "right" && (
            <BasketIcon style={{ marginLeft: "8px" }} />
          )}
        </>
      )}
    </Button>
  ),
};

Not using react-docgen-typescript (before upgrade to 8.0.0)

Not using react-docgen-typescript no argTypes (Controls) generated (after upgrade to 8.0.0)

Using react-docgen-typescript, argTypes (Controls) generated but code preview broken (after upgrade to 8.0.0)

[unleashit]

Same issue and started cropping up around the time of RC5. Using either react-docgen or react-docgen-typescript. Are you guys in a monorepo? I tried to reproduce outside of my project in a clean install and couldn't.

[unleashit]

Pretty much narrowed it down to the 8.0.0-rc.4 package of @storybook/react. If you downgrade it to rc3 for that package, clear all caches (browser + delete node_modules and run nx reset if using nx, etc) and then npm install it works again.

Maybe this PR: #26382 ?

EDIT: be sure to pin it to 8.0.0-rc.3 (no ^)

[Vempejul]

Tried with 8.0.0-rc.3 instead of 8.0.0 and that did the trick.

[asyrul21]

Opened duplicated 26538 to report same issue. Had to downgrade both @storybook/react and @storybook/react-webpack5 to 8.0.0-rc.3 to fix the broken code preview, though it would be great to have it fixed on 8.0.0 as well. Also, the downgrade would cause some compatibility warnings to appear on the logs.

Much thanks to all involved with the fix !

[filiptammergard]

I'm also getting <object Object> instead of <Component> when upgrading to v8 using react-docgen-typescript.

[kasperpeulen]

Will be fixed with #26566

[yannbf]

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

[adrianaferrugento]

Thank you so much @yannbf!

[unleashit]

Thanks @yannbf. I know this deserves a new issue (and I will later when I have time), but the fix resulted in problems with the control display. See the screenshot. React element objects are displayed instead of something like a set object button:

This is using the default react-docgen.

[yannbf]

Thanks @yannbf. I know this deserves a new issue (and I will later when I have time), but the fix resulted in problems with the control display. See the screenshot. React element objects are displayed instead of something like a set object button:

This is using the default react-docgen.

Hey there, I think this has always been the case, as a current limitation of how controls are showing JSX elements. Can you show a reproduction where it behaved differently?

[unleashit]

Hey thanks for the reply. So I just figured out that using the LinkTo from the @storybook/addon-links/react in an arg (which allows me to link between stories using the Storybook router) causes this issue. This confused me because any other JSX/ComponentType props (with or without args) would display a set object button.

Honestly, I am having a lot of issues in general with the autodocs. I would normally be happy to take the time to file bugs and even do a repro, but I've spent so much time on it that I've had to switch gears. To be fair I don't doubt it's tough on your end when you don't have control of the main dependency (react-docgen).

With how things are right now in this project, I'll either have to either have an argType for most/all args with various overrides or it might just be easier to create mdx pages with manual prop tables. But I'm still very appreciative about Storybook in general. Thanks for all you do!

Edit: the issue wasn't just with LinkTo, it does seem to be consistent when using JSX/React Elements as args. However as an aside, I am sometimes getting this when providing the arg as a component instead (these props are designed to take either React.ReactNode or ComponentType:

After poking at this just a little more, I now see that I get something different in the control cell when an arg is provided, vs. a default value... even when the arg is the same type as the default value.

Example with a default value but no arg:

Same prop but this time with an arg loader: () => <div>Loading...</div>:

Sorry again for adding all this to a closed issue, but I original thought the fix to this one might have changed behavior (turns out that I changes some args around the same time...). All in all it sounds like maybe we have different expectations for what the UX should be, or at least what is worth doing given the challenge. IMO, if a proper control that looks good and makes sense to the user can't be displayed then nothing (or some message stating such) should be displayed.