Passing children as props to a react component breaks in production.

[miklschmidt]

What version of astro are you using?

1.6.11

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

yarn

What operating system are you using?

linux

Describe the Bug

If you're passing children as a prop to a react component from a .astro file, instead of doing it via markup, eg:

<MyComponent children="test" />

The component will receive {children: null} when building. It works fine in astro dev, but breaks in astro build when the island is loaded. Since this is perfectly viable React code, i'd regard this as a bug.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-l4gigd

Participation

• I am willing to submit a pull request for this issue. As long as someone can point me in the right direction.

[JerryWu1234]

mark

[JerryWu1234]

Hello Dude,
Perhaps you need to recheck the doc.
https://docs.astro.build/en/core-concepts/framework-components/#passing-children-to-framework-components

[miklschmidt]

@wulinsheng123 I've read them. It doesn't mention this use case. If you weren't supposed to pass children as props, i'd expect an error.

[JerryWu1234]

< MyComponent > Breaks in production </MyComponent >
try again which use this

[JerryWu1234]

[miklschmidt]

< MyComponent > Breaks in production
try again which use this

I'm perfectly aware that this works. I'm saying <MyComponent children="break in production"/> fails silently only in production. This is a bug.

[JerryWu1234]

Ok,
I still want to confirm one thing with you: the error seems to happen whether the development or the production on my side
Do you only happen in the production?

this was your offers project

[miklschmidt]

Yup, you get this because of the bug in astro (SSR HTML is inconsistent with client rendered HTML), react then switches to client rendering and rerenders the component. In production it doesn’t, so the component is blank (gets serialized to children=null).

[matthewp]

What happens in regular client-side (non-Astro) React when you pass it a prop named children with a string value?

[miklschmidt]

What happens in regular client-side (non-Astro) React when you pass it a prop named children with a string value?

props.children is then a string, as you'd expect.

import React from "https://esm.sh/react@18";
import ReactDOM from "https://esm.sh/react-dom@18";

const Test = (props) => {
  return (
    <div>{props.children}</div>
  )
}

const App = () => {
  return(
    <>
      <div className="box">
        <h1>Passing string children as prop</h1>
        <Test children="prop" />
      </div>
      <div className="box">
        <h1>Passing string children both as prop and children</h1>
        <Test children="prop">children</Test>
      </div>
    </>
  );
}

ReactDOM.render(<App />,
document.getElementById("root"))