Get CSS and JS for requested chunk at server itself

When a route is requested from server, I need to find all the required style and bundle required for that route.

import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
const statsFile = path.resolve('./loadable-stats-web.json');

const extractor = new ChunkExtractor({ statsFile }); // Do I need to pass more params here to get my case working?
const scriptTags = extractor.getScriptTags();
const styleTags = extractor.getStyleTags();

extractor.getRequiredChunksScriptContent() // . This is giving empty array.

This gives me script and style tags for base and vendor bundle. BUT the requested chunk’s JS and CSS are not included here. It’s this base.js bundle when loaded on browser makes request to corresponding chunk.

How we can achieve that in such a way that loadableReady includes that chunk’s JS and CSS as well for that loadableReady( ofcourse on client)?

import { loadableReady } from '@loadable/component';

---

I can do the same in react-loadable

import { getBundles } from "react-loadable/webpack";
const stats = require("./react-loadable-web.json");

getBundles(stats, modules);

This gives me the required chunk’s JS and CSS but the limitation is it doesn’t include base and vendor bundle’s JS/CSS

and hence, opposite to loadable-components, Loadable.preloadReady won’t include main and vendor bundle’s CSS and JS to load.

import Loadable from "react-loadable";
Loadable.preloadReady()

So, for react-loadable, I’ve to implement loading vendor and base bundle before chunk’s JS/CSS. But not sure how to know the chunk in case of loadable-components while at server

Note: I’m having only one entry point for JS base. style for base’s CSS are extracted using mini-css-extract plugin. And vendor is split using webpack’s Splitchunks.

[eseQ]

I found it! Just getMainAssets call before addChunk. Because I used it like:

Wrong way

const getExt = (url, { routerContext: RC, ...data }, routerContext, req) => {
  const extractor = new ChunkExtractor({ statsFile, entrypoints: ['app'] });
  const nodeExtractor = new ChunkExtractor({ statsFile: nodeStatsFile, entrypoints: ['node'] });
  const App = nodeExtractor.requireEntrypoint('node');
  const jsx = extractor.collectChunks(React.createElement(App, params));

  const scriptTags = extractor.getScriptTags();
  const linkTags = extractor.getLinkTags();
  const styleTags = extractor.getStyleTags();
  return { jsx, scriptTags, linkTags, styleTags };
};

const renderWithStream = (params) => {
  const { jsx, ...ext } = getExt(params);
  const htmlStream = ReactDOMServer.renderToNodeStream(jsx);
  ...
  return { htmlStream, ...ext };
};

const render = (params) => {
  const { jsx, ...ext } = getExt(params);
  const html = ReactDOMServer.renderToString(jsx);
  ...
  return { html, ...ext };
}

IMPORTANT use renderToString or renderToNodeStream before get scripts and styles with extractor.

const renderStatic = (params) => {
  const { jsx, extractor } = getExt(params);
  const html = ReactDOMServer.renderToString(jsx); // <--- IMPORTANT before use extractor.get
  const scriptTags = extractor.getScriptTags();
  const linkTags = extractor.getLinkTags();
  const styleTags = extractor.getStyleTags();
  return { html, scriptTags, linkTags, styleTags };
}

Can I ask why it is so important? How extractor works with ReactDOMServer?

@aseem2625 maybe it is will be useful for you.

[gregberge]

@aseem2625 react-loadable have issue tab closed and only merge PR that modifies docs. The project is literally dead. It is not compatible with new features coming into React and not compatible with last versions of webpack. But yeah you could use it if you want.