[Bug]: Preview breaks in MDX when Story block of property is undefined

[yannbf]

Describe the bug

It's quite common to mistype when authoring stories in MDX if you don't have intellisense.

Here's an example when you have everything correct in your MDX. It renders everything fine:

However as soon as you introduce a single issue with the of property, pointing to undefined:

<Story of={ButtonStories.Secondayr} /> <-- should have been Secondary, so it ends up undefined

The entire preview breaks.

Would it be possible to have an error boundary in it so that only that “404” element stops working? Like how it works with that “broken image icon” which is shown when you have a wrong URL in an tag?

To Reproduce

This should do it:


<Story of={undefined} /> 

### System

_No response_

### Additional context

_No response_

[dev-phantom]

would love to fix this
can i get assigned to this

[JReinhold]

@dev-phantom feel free to work on it if you want!

[yannbf]

@tmeasday I think this is now good after your changes, right?

[tmeasday]

@yannbf which changes are you referring to? If you mean the indexing errors, I'm not 100% sure. I think it checks the of is a stories file, so it'll error. We should test it out.

[tmeasday]

OK, yes it says this:

I'm not sure the error is 100% perfect. I'll submit a PR to improve it.

[tmeasday]

Ok I improved that error: #21365, but actually this issue is about doing incorrect of={} in the story block, which still has the behaviour reported on this issue. @yannbf what changes did you think might have fixed that?

[tmeasday]

I reckon the issue here is just more we don't show the error when an MDX errors for any reason. For instance if you forget to import the Story block, you have a similar white screen.

[shilman]

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.61 containing PR #21365 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease