__LOADABLE_REQUIRED_CHUNKS__ empty

[KERIST]

💬 Questions and Help

Loadable Components project is young, but please before asking your question:

• Read carefully the README of the project
• Search if your answer has already been answered in old issues

After you can submit your question and we will be happy to help you!

Hello. The problem is LOADABLE_REQUIRED_CHUNKS is empty and because of it I suppose react don't hydrate and app is running with no event listeners. I've been trying to solve it for many days. There is a similiar issue, but it closed unresolved. Please help me.

Here is a repository with code: https://github.com/KERIST/loadable-help.

[open-collective-bot[bot]]

Hey @KERIST :wave:, Thank you for opening an issue. We'll get back to you as soon as we can. Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers. If you use Loadable at work, you can also ask your company to sponsor us :heart:.

[LudvigHz]

Hey @KERIST. I had the exact same issue. It took me some time to realize as well, but you have to render the app before you collect the script tags. This is how loadable knows what chunks are required for the current render.

I.e. here: https://github.com/KERIST/loadable-help/blob/25f4957651447204c94e1ad0c2e64966b63d4f5a/server/index.js#L42-L59

Move your renderToString to above the getLinkTags etc.

+ const appHtml = ReactDOMServer.renderToString(sheet.collectStyles(jsx));

  const scriptTags = webExtractor.getScriptTags();
  const linkTags = webExtractor.getLinkTags();
  const styleTags = webExtractor.getStyleTags();

- const appHtml = ReactDOMServer.renderToString(sheet.collectStyles(jsx));

It's documented here but it really should explicitly say that the order is very important.

[KERIST]

@LudvigHz Thank you so much for your help!