关于reactjs：可加载/组件React在getScriptTags上的SSR抛出错误

Loadable/component React SSR throwing error on `getScriptTags`

我正在尝试在我的React应用程序中设置SSR，该应用程序使用与Rollup捆绑在一起的私有React组件库。一切正常，如果我不使用@loadable/component并直接导入每个组件，则该应用程序在服务器上呈现良好。

我按照此处给出的SSR设置教程进行操作，并且我正在使用craco覆盖我的CRA的webpack配置，以包含@loadable/webpack-plugin。我可以看到统计信息文件已正确生成。对于服务器Webpack配置，我从externals选项中排除了组件库。我用ChunkExtractorManagerpackage了我的应用程序，由于我使用的是Apollo，因此我先调用getDataFromTree(withmywrappedapp)，然后一旦返回结果，我就尝试提取脚本标签等。

在server.js中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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();

}).....`

不幸的是，当我尝试运行getScriptTags时，出现此错误：

1
2
3
4
5
6

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
at process._tickDomainCallback (internal/process/next_tick.js:229:7)

`
关于如何解决此问题或可能出什么问题的任何想法？

确保@loadable/component和@loadable/server处于同一版本，已为我修复。