I'm trying to set up SSR in my React app, which is using a private React component library, bundled with Rollup. Everything works fine, the app renders fine on the server, if I don't use @loadable/component and directly import each component.
I followed the tutorial for the SSR set up given here , and I'm using craco to override my CRA's webpack config, to include @loadable/webpack-plugin. I can see the stats file getting generated correctly. For my server webpack config, I'm excluding my component library from the externals option. I wrapped my app with the ChunkExtractorManager, and since I'm using Apollo, I first call getDataFromTree(withmywrappedapp) and then once this returns a result I'm trying to extract the script tags etc.
In server.js
getDataFromTree(app).then(() => {
const content = ReactDOMServer.renderToString();
const state = client.extract();
const { helmet } = helmetContext;
const scriptTags = extractor.getScriptTags(); // This throws an error
const linkTags = extractor.getLinkTags();
const html = ReactDOMServer.renderToString(
<Html content={content} helmet={helmet} assets={assets} scriptTags={scriptTags} linkTags={linkTags} state={state} initData={initData}/>,
);
if (staticContext.url) {
return res.redirect(301, staticContext.url);
}
res.status(staticContext.status || 200);
res.send(`<!doctype html>${html}`);
res.end();
}).....`
Unfortunately when I try to run getScriptTags I get this error:
TypeError: (0 , _sharedInternals.getRequiredChunkKey) is not a function
at ChunkExtractor.getRequiredChunksScriptTag (myapp/node_modules/@loadable/server/lib/ChunkExtractor.js:264:68)
at ChunkExtractor.getScriptTags (myapp/node_modules/@loadable/server/lib/ChunkExtractor.js:314:36)
at myapp/dist/server.js:64058:34
at <anonymous>
at process._tickDomainCallback (internal/process/next_tick.js:229:7)
` Any ideas on how I could fix this or what could possibly be going wrong?
Ensuring
@loadable/componentand@loadable/serverare on the same version fixed this for me.