Promises not caught when used with @loadable

[oreqizer]

Original issue: gregberge/loadable-components#480

Promises are not being caught when used with @loadable/component.

[kitten]

I'll probably need more details here.

• What kind of thrown suspense promises are we talking about?
• Is this related to something being thrown inside the Loadable library or in the dynamically loaded page?
• Have you checked whether Loadable is set up correctly so that your dynamically-loaded component is reachable during SSR?
• Do you have a reproduction I could check?

That'd help tremendously 🙏

[oreqizer]

I am following urql's SSR docs regarding all of these

What kind of thrown suspense promises are we talking about?

I am awaiting thrown promises like so:

  await ssrPrepass(
    <UrqlProvider value={client}>
      <StaticRouter context={context} location={url} basename={process.env.BASENAME}>
        <Root />
      </StaticRouter>
    </UrqlProvider>,
  );

if I define them with @loadable for bundle splititng

import loadable from "@loadable/component";

export const Index = loadable(() => import("app/pages/Index"));

...it doesn't work.

but if I define them normally, it works:

export { default as Index } from "app/pages/Index";

Is this related to something being thrown inside the Loadable library or in the dynamically loaded page?

By "thrown" I mean urql's promises for SSR.

Have you checked whether Loadable is set up correctly so that your dynamically-loaded component is reachable during SSR?

Yes

Do you have a reproduction I could check?

yarn init
yarn add @reactizer/cli @reactizer/boil-urql
yarn reactizer init --app urql
yarn
yarn start
# 1. visit localhost:8080, it works
# 2. change <RootSync /> in `src/_server/markup/index.ts` to <Root />, that one uses @loadable
# 3. it doesn't work (throws error)

[khmm12]

I left my explanation why it happens in original issue.
gregberge/loadable-components#480 (comment)

[oreqizer]

@khmm12 fixed it 👌