[Bug]: Autodocs not working when a React component returns a portal

[symsmith]

Describe the bug

If a React component returns a portal created by createPortal from react-dom, Autodocs doesn’t retrieve the type information or JSDoc comments from the file.

To Reproduce

https://stackblitz.com/edit/github-cj2wcx?file=src%2Fstories%2FButtonPortal.tsx

ButtonPortal is the same component as Button, but the returned value is wrapped in createPortal. See the difference between Button/Docs and ButtonPortal/Docs

System

Local environment:


  System:
    OS: macOS 14.0
    CPU: (10) arm64 Apple M2 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 9.1.1 - ~/Library/pnpm/pnpm <----- active
  Browsers:
    Edge: 124.0.2478.105
    Safari: 17.0
  npmPackages:
    @storybook/addon-actions: ^8.1.1 => 8.1.1 
    @storybook/addon-essentials: ^8.1.1 => 8.1.1 
    @storybook/addon-links: ^8.1.1 => 8.1.1 
    @storybook/addon-onboarding: ^8.1.1 => 8.1.1 
    @storybook/manager-api: ^8.1.1 => 8.1.1 
    @storybook/react: ^8.1.1 => 8.1.1 
    @storybook/react-vite: ^8.1.1 => 8.1.1 
    @storybook/theming: ^8.1.1 => 8.1.1 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8.1.1 => 8.1.1 

But it works the same way on Stackblitz

### Additional context

Is this normal/documented?

[shilman]

This looks like a deficiency of react-docgen which is the tool we use to analyze React components by default in 8.0+.

One workaround is to use the much slower, but more accurate react-docgen-typescript instead but adding the following to .storybook/main.ts:

export default {
  // existing...
  typescript: {
    reactDocgen: 'react-docgen-typescript',
  }
};

[symsmith]

I found another workaround, which is to wrap the createPortal call with a fragment. I still wanted to give notice, because I scratched my head for a while before realizing what was different from my other components/stories.

Basically it looks like the component has to return a React.JSX.Element for Autodocs to work.

[shilman]

Thats interesting @symsmith and a better workaround (though still annoying). Hopefully we can come up with a better approach to all this soon...