[Bug]: Story with a prop that kaes an array that holds JSX freezes storybook.

Describe the bug

The issue was documented already here: https://github.com/storybookjs/storybook/issues/17720

if you add a component to your story with a prop that takes an array of objects, and pass in jsx it breaks the story especially in docs.

See here:

https://stackblitz.com/edit/github-buuamr?file=public%2Ftest.stories.ts,src%2Fstories%2FProblem.stories.tsx&preset=node

If you change the icon inside the stuff prop to regular text it works and shows up as a story. Otherwise it hangs.

Reproduction link

https://stackblitz.com/edit/github-buuamr?file=public%2Ftest.stories.ts,src%2Fstories%2FProblem.stories.tsx&preset=node

Reproduction steps

Visit the Test "Problem" Story. See that ti does not work if the prop takes in JSX

System

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/addon-interactions: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/addon-links: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/addon-onboarding: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/blocks: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/nextjs: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/react: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/test: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    storybook: ^8.3.0-alpha.2 => 8.3.0-alpha.2

Additional context

No response

Disclaimer This information might be inaccurate, due to it being generated automatically To resolve the issue where a story with a prop that takes an array holding JSX freezes Storybook, follow these steps:

Locate the Prop Type Definition: Ensure that the prop type for the array holding JSX is correctly defined. For example, if the prop is named stuff, it should be defined to accept PropTypes.arrayOf(PropTypes.node).
Update the Story: Modify the story to ensure the prop is passed correctly. For instance, if stuff is the prop, it should be passed as an array of JSX elements.
Example Code:

// In your component file
MyComponent.propTypes = {
  stuff: PropTypes.arrayOf(PropTypes.node),
};

// In your story file
export const ProblemStory = () => (
  <MyComponent
    stuff={[<div key="1">JSX Element 1</div>, <div key="2">JSX Element 2</div>]}
  />
);

Check Documentation: Ensure that the documentation for the prop types is correctly generated and does not cause any infinite loops or excessive rendering.

Refer to /code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/properties.snapshot for examples of prop type definitions.

References

/.github/DISCUSSION_TEMPLATE/help.yml /code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/properties.snapshot /.github/DISCUSSION_TEMPLATE/ideas.yml /.github/comments/invalid-link.md /code/renderers/server/template/cli/button.stories.json /code/core/src/csf-tools/CsfFile.test.ts /code/lib/cli/src/automigrate/fixes/new-frameworks.ts /code/core/src/core-server/utils/mockdata/errors/NoMeta.stories.ts /.github/DISCUSSION_TEMPLATE/rfc.yml /code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts /code/core/src/core-server/utils/mockdata/errors/MetaOfNoName.mdx /code/core/src/server-errors.ts /code/renderers/react/src/docs/propTypes/handleProp.test.tsx /code/core/src/csf-tools/ConfigFile.test.ts /code/frameworks/angular/src/builders/build-storybook/schema.json /code/core/src/manager/components/sidebar/Brand.tsx /code/lib/cli/src/automigrate/fixes/mdx-to-csf.test.ts /code/lib/cli/src/automigrate/fixes/sb-scripts.test.ts /code/core/src/core-server/utils/mockdata/errors/MetaOfClashingDefaultName.mdx /code/renderers/react/src/public-types.test.tsx /code/addons/docs/template/stories/docspage/extract-description.stories.ts /code/core/src/preview-errors.ts /docs/_snippets/storybook-a11y-register.md /code/addons/measure/package.json /code/lib/blocks/package.json

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

storybookjs / storybook