[Bug]: Passing a React Node as a prop breaks docs in v9

[ChrisSargent]

Describe the bug

When passing a react node as a prop to a component, the docs page breaks with a "Cannot convert a Symbol value to a string" error.

This has only started happening after we migrated to v9.

Reproduction link

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

Reproduction steps

1. Go to the above link
2. Click on the 'docs' for the Button stories
3. Check that a node is being passed to the label prop of the button
4. See the error

System

Storybook Environment Info:

  System:
    OS: macOS 15.5
    CPU: (8) arm64 Apple M3
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.19.4 - ~/.nvm/versions/node/v20.19.4/bin/node
    Yarn: 4.9.2 - ~/.nvm/versions/node/v20.19.4/bin/yarn <----- active
    npm: 10.8.2 - ~/.nvm/versions/node/v20.19.4/bin/npm
  Browsers:
    Chrome: 138.0.7204.184
    Safari: 18.5
  npmPackages:
    storybook: ^9.1.0 => 9.1.0

Additional context

No response

[dosubot]

Hi @ChrisSargent! I'm Dosu and I’m helping the storybook team.

This is a known issue in Storybook v9: when a React node is passed as a prop, the docs page can break with a "Cannot convert a Symbol value to a string" error. This happens because the ArgsTable component tries to serialize and display prop values, but doesn't handle React nodes (which may contain Symbols) defensively, leading to this error. The root cause is in the formatting layer for docs tables, and a recent PR improved ReactNode handling, but it doesn't fully resolve this bug yet (details).

The best workaround for now is to exclude problematic props (like those accepting React nodes) from the ArgsTable in your docs. You can do this globally in your .storybook/preview.ts:

export default {
  parameters: {
    docs: {
      controls: { exclude: ['label'] }, // replace 'label' with your prop name
    },
  },
};

Or at the component/story level using the parameters field. More info is in the official docs.

Keep an eye on future Storybook releases for a more robust fix. If you need more advanced customization or this workaround doesn't fit your use case, let me know!

To reply, just mention @dosu.

---

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

[pakeerathanchandrabalael]

I have same issue when upgrading from v. 9.0.17 to v9.1.0

[yannbf]

Hey @ChrisSargent thanks a lot for reporting this. We will take a look and provide a fix as soon as possible.