error img is a self-closing tag and must neither have children nor use dangerouslySetInnerHTML.

[dande-sun]

Astro Info

> astro info

Astro                    v3.4.3
Node                     v20.8.1
System                   Linux (x64)
Package Manager          npm
Output                   server
Adapter                  @astrojs/node
Integrations             @astrojs/react
                         @astrojs/tailwind
                         @astrojs/sitemap
 error   Command failed: which xclip

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

No response

Describe the Bug

When I pass img tag as props to react component, I got an error: 'img is a self-closing tag and must neither have children nor use dangerouslySetInnerHTML.'.
but if the img tag coding in the react component, it's working.
the astro code：

the react code:

What's the expected result?

I hope can pass the img tag to React component, because astro components is deficient, and most of it is development phase.

Link to Minimal Reproducible Example

https://codesandbox.io/p/sandbox/angry-sun-xpzhps?file=%2Fsrc%2Fcomponents%2FCarousel.tsx%3A16%2C19

Participation

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

[milcaunicorn]

Try the adding client instructions on which strategy for hydration astro should use for non astro components.

<ReactComp client:load client:only="react">
   children
</ReactComp>

[lilnasy]

Thanks for looking into it, @milcaunicorn! This really helps. Summarizing the issue:

• Affects both dev and build
• Affects server render, "client:only" works.
• Appears only when experimentalReactChildren is enabled.
• React expects self-closing elements to not have children, but the react integration's experimental feature always creates an array.