[Storybook 8] React Docgen Typescript showing compiled JS code in code snippet instead of JSX Component

[asyrul21]

Summary

Hi,

Recently I have upgraded to Storybook 8. I found out that the Auto-generated docs are not showing the Component all the Props properly, so I opted to use the react-docgen-typescript in my main.ts. The props are now showing, but the code snippet (when we click the "show code" button) are showing compiled Javascript, instead of JSX Components.

Additional information

First off this is an open-source project, and you can see what I mean by going here, then click the "show code".

We are seeing:

<A=>{var{to,text="Back",disabled=!1,rootClassName,rootStyles={},linkClassName,linkStyles={},theme="light"}=A,spacingsProps=Rest(A,["to","text","disabled","rootClassName","rootStyles","linkClassName","linkStyles","theme"]);const containerStyles=(0,styles.Ag)((0,styles.FU)((0,styles.V8)({backContainer:!0},spacingsProps),rootClassName,{disabled,noSelect:!0}),(0,styles.GI)("backTheme",theme)),linkClasses=(0,styles.Ag)((0,styles.FU)({},linkClassName),(0,styles.GI)("backLinkTheme",theme));return react.CreateElement("div",{"data-testid":"back-root",className:containerStyles,style:rootStyles,role:"navigation"},react.CreateElement("a",{rel:"noreferrer",href:to,className:linkClasses,style:linkStyles,"data-testid":"back-link"},"<"," ",text))}
  text="Back"
  to="/"
/>

We expect:

<Back
  text="Back"
  to="/"
/>

I have updated the Story for that component to support latest API:

const Meta: Meta<typeof Back> = {
  title: "Components/Buttons/Back",
  component: Back,
  parameters: {
    controls: { expanded: true },
    docs: {
      description: {
        component: dedent`
            A Back Button component.

            It supports Margin props.

            You can customize hover and behaviour via linkClassName.

            Import statement: \`import { Back } from 'reso-ui'\`
        `,
      },
    },
  },
};

export default Meta;
type Story = StoryObj<typeof Back>;

export const Default: Story = {
  args: {
    to: "/",
    text: "Back",
  },
  render: (args) => {
    return <Back {...args} />;
  },
};

So I dont think the story files are the issue here.

Some dependencies:

 "react": "^18.2.0",
 "react-dom": "^18.2.0"
 "@storybook/react": "^8.0.0",
 "@storybook/react-webpack5": "^8.0.0",
"webpack": "^5.75.0",
"typescript": "^4.9.4",

I have played around with my main.ts configs, but to no avail.

Main.ts:

import ts from "typescript";
import { TypescriptOptions } from "@storybook/builder-webpack5";
import type { StorybookConfig } from "@storybook/react-webpack5";
import { Configuration } from "webpack";
import webpackConfig from "../webpack.dev";

const config: StorybookConfig = {
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: ["@storybook/addon-essentials"],
  docs: {
    autodocs: true,
  },
  staticDirs: ["../public"],
  typescript: {
     reactDocgen: "react-docgen-typescript",
     reactDocgenTypescriptOptions: {},
   } as Partial<TypescriptOptions>,
  webpackFinal: async (config: Configuration) => {
    return {
      ...config,
      module: {
        ...config.module,
        rules: [...webpackConfig.module.rules],
      },
      resolve: {
        plugins: [...webpackConfig.resolve.plugins],
        extensions: [
          ...(config?.resolve?.extensions || []),
          ...(webpackConfig.resolve.extensions || []),
        ],
        alias: {
          ...(config?.resolve?.alias || []),
          ...(webpackConfig.resolve.alias || []),
        },
      },
    };
  },
};

export default config;

My Preview.ts:

import { Preview } from "@storybook/react";

const preview: Preview = {
  parameters: {
    controls: { expanded: true },
  },
};

export default preview;

My webpack config:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "development",
  entry: path.resolve(__dirname, "src/index.tsx"),
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: "ts-loader",
        options: {
          configFile: "tsconfig.json",
        },
      },
      /* Styles / CSS and SCSS */
      {
        test: /\.(css|scss)$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              injectType: "singletonStyleTag",
            },
          },
          // Loads the CSS
          "css-loader",
          // Compiles Sass to CSS
          {
            loader: "sass-loader",
            options: {
              additionalData: '@use "vars_and_mixins" as *;',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "public", "index.html"),
    }),
  ],
  devtool: "source-map",
  devServer: {
    port: 3000,
  },
});

You can also view the project repo here. To run storybook, just git clone, npm install, and npm run dev.

Note sure if I missed something here. Appreciate your kind help and attention.

Thank you!

Create a reproduction

No response

[shilman]

closing as probable dupe to #26510

[asyrul21]

Thanks!