Confusion about whenComponentsReady()

[thomasjm]

I'm experiencing several points of confusion over the whenComponentsReady() function and how to use it.

First of all, the README seems to be out of date. It indicates that a version of the function is exported from both the server-side API and client-side API at react-imported-component/server and react-imported-component/boot respectively. However, the former export doesn't seem to exist. A version is exported from the main package react-imported-component. The two exported versions appear to be identical.

The documentation for the server side says the returned promise will be resolved "when all components are loaded." I'm confused about what "all" means here -- does it mean every possible chunk? Should it therefore be called once on server startup and then never again, or should it be called on each request handler?

I'm trying to use it in conjuction with the Apollo GraphQL library, which has a function getDataFromTree which is meant to gather all the GraphQL queries needed by the tree. I tried putting whenComponentsReady before it like this:

await whenComponentsReady();
console.log("Doing getDataFromTree");
await getDataFromTree(app);
console.log("Finished getDataFromTree");

However, I always get the following error message on the first request served by my server:

react-imported-component: using not resolved loadable. You should `await whenComponentsReady()`.

The log statements allow me to confirm this error message is happening while getDataFromTree is running. The fact that this happens is messing up the server-side render because some of the GraphQL queries are missed.

I've tried sprinkling await whenComponentsReady() calls in various other places but no luck. I'm also confused because whenComponentsReady() doesn't seem to be used in any of the examples in this repo.

Any help would be much appreciated!

[theKashey]

1. whenComponentsReady resolves when all components, set to be loaded, are loaded
2. on server side all components are autoloaded (unless explisitly told not to do).

So you are right, on SSR that means every possible chunk.

Technically you should await it once, in the very beginning, and it shall take one process.tick to finish.

react-imported-component: using not resolved loadable. You should await whenComponentsReady().

Probably the problem is not with whenComponentsReady but with a list of components, the one generated via CLI command, you have to import first, and then await for.
Or the problem could be linked the babel plugin, not able to instrument your imports, or with something else.

Let's not guess. Is there any way to provide a little more details on how you use imported, so I could help you resolve this issue?

[thomasjm]

Probably the problem is not with whenComponentsReady but with a list of components, the one generated via CLI command, you have to import first, and then await for.

I don't currently import this autogenerated file on the server side. I just looked over the documentation/examples again and it doesn't seem to be used on the server side there, only the client side. Should it be imported? That would explain how whenComponentsReady() knows about the chunk list during SSR, which is currently a mysterious connection to me...

I can probably prune down my current project to a simple repro, it would take a little bit of work though. Maybe we can try a couple follow-up questions first? FWIW I'm using lazy and LazyBoundary, with parcel.

[thomasjm]

(In particular, I notice that the example at react-imported-component/examples/SSR/parcel-react-ssr only imports imported-chunk.js within app/main.js and app/client.js. I mostly based my app on this example so mine works the same way.)

Update: I tried adding the import you mentioned like this:

/* In server/ssr.tsx */
const imported = await import("../app/imported");
await whenComponentsReady();
await getDataFromTree(app);

but this actually caused a weird error (MODULE_NOT_FOUND, Error: Cannot find module 'SWcE') to happen in whenComponentsReady()...

[theKashey]

you probably should create app after awaiting for components, but that would not fix the error.

So the error is happening due to "loading" of components referred via ../app/imported. Something is wrong there, and I cannot tell you what exactly - by some reason, some module is not found.
From what I could see you are using production version for SSR. Can you try dev mode - it might decrypt module name and let us understand the real error.

[thomasjm]

Ah, that helped, thanks! Dev mode helped me find 2 different NPM dependencies that don't seem to behave well in SSR. I'll have to dig into why that is separately.

I think the main remaining request for this issue would be to include information about whenComponentsReady in the docs/examples, since how to use it (and even the fact that you need it, plus an import of the autogenerated file) is currently not mentioned.

[theKashey]

😅 very serious issue