Issue: storybookjs/storybook#26111
This repository demonstrates an existing bug in Storybook version 8.0.0-beta.3 (also occurring in 8.0.0-beta.2).
- Clone the repository
- npm run install
- npm run storybook
- Go to story "label (non-working-component 1 or 2)"
Reproducing this is trivially simple, all you need to do is define Stories that pass JSX to the used component instead of just a string.
Example:
Working stories: ✅
export const LabelStory: Story = {
name: "label (working component)",
args: {
label: 'Hi, this component fully works.',
},
};Non-working stories: ❌
export const LabelStory2: Story = {
name: "label (non-working component)",
args: {
label: <span>Hi, this component causes storybook crash :(</span>,
},
};It also doesn't matter whether the prop provided in args is handled in the component.
Example:
export const LabelStory3: Story = {
name: "label (non-working component)",
args: {
label: 'Hi, this component should fully works...',
randomUnhandledPropInComponent: <span>...but trying to pass JSX prop causes it to crash:/</span>
},
};