Preact: lazy() throws (will be) resolved promise

[whitetrefoil]

Run something like this:

import { lazy }  'preact/compat';

const Nested = lazy(() => import('./Nested'));

return <div><Nested/></div>;

result to this:

After digging the source, I guess (but not verified yet) it seems to be thrown from here:
https://github.com/preactjs/preact/blob/812b25721db79d044c9769b1caef384fc762c91c/compat/src/suspense.js#L113

because it didn't waiting for this promise:
https://github.com/preactjs/preact/blob/812b25721db79d044c9769b1caef384fc762c91c/compat/src/suspense.js#L102

[JoviDeCroock]

It's normal, as long as the lazy promise has not been resolved it will throw a promise for the Suspense to catch. When suspense catches this it renders the fallback. Make sure your lazy is wrapped within a suspense boundary.

If this isn't working for you could you give us a reproducible example.

[marvinhagemeister]

yup, @JoviDeCroock is correct. There _must_ be a Suspense component somewhere higher up in the tree for lazy to work :+1:

[whitetrefoil]

Yeah, I found the real problem thanks to your hints~

I did wrap the lazy element with a <Suspense>, but my IDE automatically import Suspense from

import { Suspense } from 'preact/compat/src/suspense';

After changed to import { Suspense } from 'preact/compact' everything just works as expected.

Thanks!