Question

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

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

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

}).....`

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

 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)

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

Answer 1

确保@loadable/component和@loadable/server处于同一版本，这对我来说是固定的。

可加载/组件React SSR在`getScriptTags`上引发错误

1 个答案: