Bug: React.lazy throws undefined instead of an Error object #18768
Description
React version: 16.13.1
Steps To Reproduce
import React, { Suspense, lazy } from "react";
const Async = lazy(() => {}); // <------
let App = () => {
return (
<Suspense fallback={"Loading"}>
<Async />
</Suspense>
);
};
export default App;Link to code example: https://codesandbox.io/s/elegant-fermi-bxwtb
Might be related to #15019, #15222
Context
I know that this is incorrect code, but lazy(() => {import(...)}) is a rather easy typo to make.
The main reason why I'm bringing this is up is that other tools (like JSDOM and Codesandbox with the link above) expect an Error object to be thrown.
The current behavior
Input: const Async = lazy(async () => ({}));
Error: (this is correct)
Warning: lazy: Expected the result of a dynamic import() call. Instead received: [object Object]
Your code should look like:
const MyComponent = lazy(() => import('./MyComponent'))
Input: const Async = lazy(() => ({}));
Error: (the exception is not an Error object)
Uncaught {}
Input: const Async = lazy(() => {});
Error: (the exception is not an Error object)
Uncaught undefined
The expected behavior
Input: const Async = lazy(async () => ({}));
Error:
Warning: lazy: Expected the result of a dynamic import() call. Instead received: [object Object]
Your code should look like:
const MyComponent = lazy(() => import('./MyComponent'))
Input: const Async = lazy(() => ({}));
Error:
Warning: lazy: Expected the result of a dynamic import() call. Instead received: undefined
Your code should look like:
const MyComponent = lazy(() => import('./MyComponent'))
Input: const Async = lazy(() => {});
Error:
Warning: lazy: Expected the result of a dynamic import() call. Instead received: [object Object]
Your code should look like:
const MyComponent = lazy(() => import('./MyComponent'))