Astro MDX fails to render framework components and components defined with MDX file, when explicit null or undefined prop passed in

[duanwilliam]

Astro Info

(from stackblitz environment)

Astro                    v4.5.10
Node                     v18.18.0
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/mdx

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

If a framework component is used within an MDX file, and one of its props gets passed in an explicit undefined or null, Astro crashes with an error trying to render the component.
This issue also occurs for components defined within the MDX file.

e.g.

import A from 'foo.jsx'

export function B() { return <div /> }

{/* both of these cause an error */}
<A foo={undefined} />
<B bar={undefined} />

The problematic line is

astro/packages/astro/src/runtime/server/jsx.ts

Lines 118 to 119 in bb7707e

	for (const [key, value] of Object.entries(props)) {
	if (value['$$slot']) {

in these cases,

• vnode is an object, so renderJSX delegates to renderJSXNode (this seems to be true of all the jsx inside an mdx file?)
• vnode['astro:jsx'] is true (i.e. it is in fact a vnode)
• vnode.type is the component, i.e. a function
• vnode.type does not have isAstroComponentFactory set
• there is no truthy server:root prop

which leads to aforementioned line being called, resulting in attempting to do a property access on null/undefined which results in an error.

What's the expected result?

Component renders properly.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-mbbqqu?file=src%2Fpages%2Fa.mdx

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

Yes, please do send a PR, thanks!