In .tsx, this works as expected:
const LazyComponent = lazy(() => import("path-to-my-lazy-component"));
const SuspenseComponentTSX = (
<React.Suspense fallback={<div>Loading</div>}>
<LazyComponent />
</React.Suspense>
)
render(SuspenseComponentTSX);
But the supposed equivalent in .ts does not work:
const LazyComponent = lazy(() => import("path-to-my-lazy-component"));
const SuspenseComponentTS = React.createElement("Suspense", {
fallback: React.createElement("div", null, "Loading")
},
React.createElement(LazyComponent)
);
render(SuspenseComponentTS); // fails
The error message when trying to render SuspenseComponentTS is the following:
A React component suspended while rendering, but no fallback UI was specified.
Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.
Printed to console, they appear to be equivalent:
Output of expect(SuspenseComponentTSX).toEqual(""):
expect(received).toEqual(expected) // deep equality
Expected: ""
Received: <React.Suspense fallback={<div>Loading</div>}><UNDEFINED /></React.Suspense>
Output of expect(SuspenseComponentTS).toEqual(""):
expect(received).toEqual(expected) // deep equality
Expected: ""
Received: <Suspense fallback={<div>Loading</div>}><UNDEFINED /></Suspense>
