Does Storybook autodocs support JSDoc tags?

[TomBigelow]

Summary

Im trying to get my JSDoc parameters to show up in the docs tab of my React.js component in storybook, but the JSDoc parameters are just being displayed as blank text. What is the expected behaviour? Is this possible or am I doing something wrong?

It was my understanding that react-docgen parsed the component for JSDoc tags and displayed them correctly in the Storybook. Currently I see the parameters come from the PropTypes. And If I were to supply a default using "=" in the component signature, then that would populate there as well.

NewComponent.jsx:

import PropTypes from "prop-types";

/**
 * A new component that displays a message.
 *
 * @component
 * @param {Object} props - The props object.
 * @param {string} props.message - The message to display (from the jsdoc).
 * @returns {JSX.Element} The rendered component.
 *
 */
const NewComponent = ({ message }) => {
  return <div>{message}</div>;
};

NewComponent.propTypes = {
  /**
   * The message to display
   */
  message: PropTypes.string.isRequired,
};

export default NewComponent;

newcomponent.stories.js:

import NewComponent from "./NewComponent";

export default {
  title: "Components/NewComponent",
  component: NewComponent,
};

/**
 * Default story for the NewComponent
 */
const Template = (args) => <NewComponent {...args} />;

export const Default = Template.bind({});
Default.args = {
  message: "Hello, New World!",
};

Additional information

main.js:

export default {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials", // Includes @storybook/addon-docs
    "@storybook/addon-docs",
    "@storybook/preset-create-react-app",
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  webpackFinal: async (config, { configType }) => {
    // Ensure react-docgen is correctly handling JSDoc comments
    config.module.rules.push({
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
            plugins: ["babel-plugin-react-docgen"],
          },
        },
      ],
    });

    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve("./src"),
    ];

    // Return the altered config
    return config;
  },
  docs: {
    reactDocgen: "react-docgen", // Ensure react-docgen is used
  },
};

Preview.js:

const preview = {
  parameters: {
    layout: "fullscreen",
    docs: {
      autodocs: true,
    },
  },
  tags: ["autodocs"],
};

export default preview;

Package.json

  "name": "test-jsdoc-storybook",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.1.0",
    "@testing-library/user-event": "^14.5.2",
    "cra-template": "1.2.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^4.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "plugin:storybook/recommended"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-react": "^7.26.3",
    "@chromatic-com/storybook": "^3.2.2",
    "@storybook/addon-docs": "^8.4.7",
    "@storybook/addon-essentials": "^8.4.7",
    "@storybook/addon-interactions": "^8.4.7",
    "@storybook/addon-links": "^8.4.7",
    "@storybook/addon-onboarding": "^8.4.7",
    "@storybook/blocks": "^8.4.7",
    "@storybook/preset-create-react-app": "^8.4.7",
    "@storybook/react": "^8.4.7",
    "@storybook/react-webpack5": "^8.4.7",
    "@storybook/test": "^8.4.7",
    "babel-plugin-react-docgen": "^4.2.1",
    "eslint-plugin-storybook": "^0.11.1",
    "jsdoc": "^4.0.4",
    "prop-types": "^15.8.1",
    "react-docgen": "^7.1.0",
    "storybook": "^8.4.7",
    "webpack": "^5.97.1"
  }
}

Create a reproduction

No response