bug: Message Failed to serialize light DOM logged when resolving components

[dwirz]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.22.3

Stencil Framework Output Target

React

Stencil Framework Output Target Version

0.7.4

Current Behavior

The SSR component resolver does not properly handle all components and produces the following error in the logs:

[react-output-target] Failed to serialize light DOM for <my-button href="#" suppressHydrationWarning="true" />: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. - this may impact the hydration of the component

Expected Behavior

All components and their child components should be resolved correctly during SSR, ensuring that no error messages are logged. The serialization process should handle all component types properly to support seamless hydration.

Steps to Reproduce

Check out the stencil-ds-output-targets run:

pnpm install
pnpm build.react
pnpm start.next

Open the app on http://localhost:3000 and look into your terminal.

Code Reproduction URL

https://github.com/ionic-team/stencil-ds-output-targets

Additional Information

I submitted two PRs that address the problem:
1. Quick Fix: Provides a temporary solution but does not guarantee prevention of future issues. (#563)
2. Extended Logic: Adds more comprehensive logic to handle all possible ReactNode types. However, since I am not entirely familiar with React’s internals, I cannot guarantee its correctness. (#562)

Feel free to review the PRs, suggest improvements, or close either of them as you see fit.

[ionitron-bot]

Thanks for the issue!

This project is currently maintained for the purposes of supporting Ionic Framework. At this time, only new issues & pull requests that support Ionic Framework will be prioritized. For the latest updates regarding the maintenance status of this project, please see this section of the project's README

[dwirz]

fixed by #573

[dgonzalezr]

I'm still getting the Failed to serialize light DOM after updating to the latest @stencil/core and @stencil/react-output-target version 😕

I've provided more details in this thread in DIscord.

[christian-bromann]

I wonder where this Text is not defined comes from. Can you provide a reproduction case for this?

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of the output targets, please create a new issue and ensure the template is fully filled out.