Incorrect JSDoc for React component description in docs/mcp addons with Object.assign()

[w-a-t-s-o-n]

Summary

Question—with the new mcp addon, I have several components that are setup basically like this:

// Component.tsx
const ComponentElement = forwardRef((props, ref) => return <ComponentThings {...props} ref={ref} />);
const ComponentGroup = (props) => return <ComponentThings {...props} ref={ref} />;

/** Component Description **/
export const Component = Object.assign(ComponentElement, {
  /** Component.Group Description **/
  Group: ComponentGroup,
});

// Component.stories.tsx
import { Component } from "./Component";
import type { Meta, StoryObj } from "@storybook/react-vite";

const meta = {
  title: "Component",
  component: Component,
  tags: ["autodocs"],
} satisfies Meta<typeof Component>

export default meta;

export const Demo: StoryObj<typeof Component> = {};

The placement of the JSDoc comments works correctly with IDE/intellisense and other tools, but in my component manifest from the Storybook MCP addon, I see:

"No description found. Write a jsdoc comment such as /** Component description */."

I can also see if I enable the Storybook docs addon that it also uses the ComponentElement JSDocs instead of the Component .

If I duplicate the JSDoc comment above the ComponentElement definition, the message goes away, but placing it there only does not work for IDEs.

Is this the intended behavior, or should I submit this as a bug? I'd prefer to not have to write the JSDocs twice for IDE/Storybook

Additional information

Storybook version 10.3.0.

I attempted to create a repro using the StackBlitz template, but I can't get it to run even without any changes. But I'll paste it below and maybe someone else can figure out what's wrong.

Create a reproduction

https://stackblitz.com/edit/github-5ekvmq2m?file=src%2Fstories%2FButton.tsx

[dosubot[bot]]

Hi @w-a-t-s-o-n! I'm Dosu and I’m helping the storybook team.

This is a limitation of the default react-docgen engine—it uses AST/Babel-based heuristics that can't handle Object.assign compound component patterns. The same applies to react-docgen-typescript.

You can try enabling the experimental react-component-meta engine in your .storybook/main.ts:

export default {
  features: {
    experimentalReactComponentMeta: true
  }
}

This uses TypeScript's LanguageService API (the same API that powers IDE autocomplete), so it should extract JSDoc from where your IDE does. It achieved 100% component detection on 15 Object.assign compound components in the Primer design system.

Please test and let us know if that resolves the issue for your components.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[dosubot[bot]]

Apologies for the confusion! The experimentalReactComponentMeta feature was added after 10.3.x and is only available in Storybook 10.4.0-alpha.0 or later.

If you're open to testing on an alpha release, you can upgrade to 10.4.0-alpha.0+ and then the configuration should work without the TS error.

Otherwise, for now on 10.3.x, the workaround would be duplicating the JSDoc on both the inner ComponentElement and the exported Component. Not ideal, but it's the only reliable option until 10.4 is stable.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[w-a-t-s-o-n]

@dosu I just tested on 10.4.0-alpha.4, and the ts error is gone, but it still uses the description from the incorrect component definition.

[dosubot[bot]]

Thanks for testing! Looking at the code, the react-component-meta engine explicitly unwraps Object.assign to extract the first argument (the inner component), which explains why it's still pulling the JSDoc from ComponentElement instead of the outer Component export.

This feature was just released in 10.4.0-alpha.4 (yesterday), and it seems the prop extraction works correctly for compound components, but JSDoc resolution may not prioritize the outer export's documentation over the inner component's.

This looks like a bug worth filing. Could you open a GitHub issue with:

• Your Object.assign component pattern (the code snippet from your original post is great)
• Expected: JSDoc from the outer Component export
• Actual: JSDoc from inner ComponentElement
• Version: 10.4.0-alpha.4 with experimentalReactComponentMeta: true

A minimal reproduction repo would help the maintainers quickly verify and fix it.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[w-a-t-s-o-n]

@dosu I found a workaround to fix this, even without the experimental flag. Instead of having a separate ComponentElement, inlining the Object.assign fixes it. I'll leave this here in case someone else runs into this:

// Component.tsx
const ComponentGroup = (props) => return <ComponentThings {...props} ref={ref} />;

/** Component Description **/
export const Component = Object.assign(
  forwardRef(function ComponentElement (props, ref) { return <ComponentThings {...props} ref={ref} />}), 
  {
    /** Component.Group Description **/
    Group: ComponentGroup,
  }
);

[dosubot[bot]]

Thanks for sharing that workaround! Inlining the forwardRef directly inside Object.assign makes sense—it prevents the docgen engine from resolving to a separate variable and losing the outer JSDoc in the process.

This should help others running into the same pattern. Appreciate you circling back with the solution!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}