Log Fragment name when trying to render a lazy fragment (#30372)
Tom Sherman committed
Jul 23, 2024 at 18:00 UTC
9cc0f6e68de2b83b11d1fb2b514d2f508c2da6f7
2 files changed
+29
-1
packages/react-reconciler/src/ReactFiberBeginWork.js
+3
-1
@@ -1891,11 +1891,13 @@ function mountLazyComponent(
1891
}
1892
}
1893
1894
+ const loggedComponent = getComponentNameFromType(Component) || Component;
1895
+
1896
// This message intentionally doesn't mention ForwardRef or MemoComponent
1897
// because the fact that it's a separate type of work is an
1898
// implementation detail.
1899
throw new Error(
1898
- `Element type is invalid. Received a promise that resolves to: ${Component}. ` +
1900
+ `Element type is invalid. Received a promise that resolves to: ${loggedComponent}. ` +
1901
`Lazy element type must resolve to a class or function.${hint}`,
1902
);
1903
}
packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+26
@@ -757,6 +757,32 @@ describe('ReactLazy', () => {
757
);
758
});
759
760
+ it('throws with a useful error when wrapping fragment with lazy()', async () => {
761
+ const BadLazy = lazy(() => fakeImport(React.Fragment));
762
+
763
+ const root = ReactTestRenderer.create(
764
+ <Suspense fallback={<Text text="Loading..." />}>
765
+ <BadLazy />
766
+ </Suspense>,
767
+ {
768
+ unstable_isConcurrent: true,
769
+ },
770
+ );
771
+
772
+ await waitForAll(['Loading...']);
773
+
774
+ await resolveFakeImport(React.Fragment);
775
+ root.update(
776
+ <Suspense fallback={<Text text="Loading..." />}>
777
+ <BadLazy />
778
+ </Suspense>,
779
+ );
780
+ await waitForThrow(
781
+ 'Element type is invalid. Received a promise that resolves to: Fragment. ' +
782
+ 'Lazy element type must resolve to a class or function.',
783
+ );
784
+ });
785
+
786
it('throws with a useful error when wrapping lazy() multiple times', async () => {
787
const Lazy1 = lazy(() => fakeImport(Text));
788
const Lazy2 = lazy(() => fakeImport(Lazy1));