Reactjs “getScriptTags”上的可加载/组件反应SSR抛出错误`_Reactjs_Webpack_Server Side Rendering_Code Splitting_Loadable Component

Reactjs “getScriptTags”上的可加载/组件反应SSR抛出错误`

reactjs webpack

Reactjs “getScriptTags”上的可加载/组件反应SSR抛出错误`,reactjs,webpack,server-side-rendering,code-splitting,loadable-component,Reactjs,Webpack,Server Side Rendering,Code Splitting,Loadable Component,我正在尝试在我的React应用程序中设置SSR，它使用一个与Rollup捆绑在一起的私有React组件库。如果我不使用@loadable/component直接导入每个组件，那么一切都正常，应用程序在服务器上呈现良好我遵循了给定SSR设置的教程，使用craco覆盖我的CRA的网页包配置，包括@loadable/webpack plugin。我可以看到正确生成的统计文件。对于我的服务器网页包配置，我将从externals选项中排除我的组件库。我用ChunkExtractorManager包装了我

我正在尝试在我的React应用程序中设置SSR，它使用一个与Rollup捆绑在一起的私有React组件库。如果我不使用

@loadable/component

直接导入每个组件，那么一切都正常，应用程序在服务器上呈现良好

我遵循了给定SSR设置的教程，使用

craco

覆盖我的CRA的网页包配置，包括

@loadable/webpack plugin

。我可以看到正确生成的统计文件。对于我的服务器网页包配置，我将从

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

}).....`

关于如何修复此问题或可能出现的问题，您有什么想法吗？

确保

@loadable/component

和

@loadable/server

在同一版本上为我修复了此问题

 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)