React 19 breaking with this.props.children

[2xOu7]

Hello,

Our code is now breaking when we upgrade to React 19. It seems related to this.props.children, and it works fine in React 18. I have attached the error and a screenshot of where the code is breaking.

[Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner}). If you meant to render a collection of children, use an array instead.]
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner}). If you meant to render a collection of children, use an array instead.

[eps1lon]

Whatever is in this.props.children is likely JSX from another version of React. We often got these reports when people used 3rd party dependencies that inlined the JSX runtime in their build process when it should be an external.

I recommend removing as much code as possible from this Component tree until it no longer reproduces. That should help identifying the offending Component.

[micky0001]

check this might be useful for you
render(): Element {
const { microCopiesToRender, isPreviewMode } = this.state;

// Validate `this.props.children`
const validChildren = React.Children.map(this.props.children, (child) => {
    if (React.isValidElement(child)) {
        return child;
    }
    console.error("Invalid child found:", child);
    return null; // or handle invalid children gracefully
});

if (!microCopiesToRender) {
    return <>{validChildren}</>;
}

return (
    <MicrocopyContext.Provider
        value={{ copies: microCopiesToRender ?? [], isPreview: isPreviewMode }}
    >
        {validChildren}
    </MicrocopyContext.Provider>
);

}

[2xOu7]

@eps1lon
Nothing's logging when I put the code above. It breaks on build without me even running the code.

The only child of the class is a paragraph element as of now, so no third party dependencies. The code screenshot above is part of an npm library that I am writing and trying to import into another project.

Everything works works completely fine when I build my npm library with React 18 and I make the other project also use React 18 (or if both use React 19), but any mismatch between React versions causes stuff to break.

[2xOu7]

Update: Even with no children, it breaks!

[piokasar]

I am also seeing this issue unfortunately.

[davecarlson]

Do an npm ls react and npm ls react-dom.

If you see packages using 18, this is why it's happening, as there's a mistmatch between 19 and 18. I'd recommend looking into the effected packages and maybe helping them raise PR's to update their deps/peerDeps

[2xOu7]

It sounds like this is a backwards compatibility issue - is there no intention to fix it?

[eps1lon]

It sounds like this is a backwards compatibility issue - is there no intention to fix it?

It is highly likely you're using a library that inline the JSX runtime from a previous version.

I recommend removing code until it no longer reproduces. That should help identifying the offending library.

Without a reproduction, we can't help.

[piokasar]

I was able to reproduce it with the following stack trace:

[Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner}). If you meant to render a collection of children, use an array instead.]
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner}). If you meant to render a collection of children, use an array instead.
    at retryNode (/Users/katherine/next-app-2/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4917:13)
    at renderNodeDestructive (/Users/katherine/next-app-2/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4689:7)
    at renderElement (/Users/katherine/next-app-2/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4324:7)
    at retryNode (/Users/katherine/next-app-2/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4871:16)
    at renderNodeDestructive (/Users/katherine/next-app-2/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4689:7)
    at renderNode (/Users/katherine/next-app-2/node_modules/react-dom/cjs/react-dom-server.edge.production.js:5128:14)
    at renderChildrenArray (/Users/katherine/next-app-2/node_modules/react-dom/cjs/react-dom-server.edge.production.js:5019:7)
    at retryNode (/Users/katherine/next-app-2/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4885:9)
    at renderNodeDestructive (/Users/katherine/next-app-2/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4689:7)
    at renderElement (/Users/katherine/next-app-2/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4417:9)
Export encountered an error on /, exiting the build.
 ⨯ Static worker exited with code: 1 and signal: null

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!