Bug: React fails to log invariant 306 message when lazy() resolves to a Fragment

[tom-sherman]

React version: 18.2.0

Steps To Reproduce

1. Try to render this component: const LazyFragment = lazy(() => Promise.resolve({ default: Fragment }));

Link to code example:

https://github.com/tom-sherman/react-lazy-fragment-bug

The current behavior

It throws an error:

Cannot convert a Symbol value to a string

The expected behavior

It should throw an error related to invariant 306 eg.

Element type is invalid. Received a promise that resolves to: Fragment. Lazy element type must resolve to a class or function.

[MeenuyD]

Hello, I think the issue you're encountering is related to using lazy with a dynamically resolved promise that resolves to { default: Fragment }. However, lazy expects the resolved value to be a class or function component, not an object.
use dynamic import to load the Fragment component from the react module, and then we wrap it in an object with the default property as { default: module.Fragment }. This ensures that lazy receives a valid component as its resolved value.

[tom-sherman]

Firstly {default: Fragment} is not the issue. Lazy doesn't care about immediately resolved promises, this pattern works fine with function components or classes.

The same issue happens if you default export Fragment from a module and then lazy(() => import("./LazyFragment")). See tom-sherman/react-lazy-fragment-bug@95b1567

Secondly, the expected behaviour is to log an appropriate error from React. Instead it's failing to do so and throwing a random exception.

Whether a lazily loaded Fragment should work is besides the point, that can be discussed in a separate issue. This bug is about the incorrect error message being displayed.

[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!

[tom-sherman]

Still an issue on latest canary.

[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!

[GitHub Actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[tom-sherman]

This still exists on latest canary.