时间戳

首页 > 解决方案 > `getScriptTags` 上的可加载/组件 React SSR 抛出错误

reactjs - `getScriptTags` 上的可加载/组件 React SSR 抛出错误

问题描述

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

我按照此处给出的 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)

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

标签： reactjswebpackserver-side-renderingcode-splittingloadable-component

解决方案

确保@loadable/component并@loadable/server使用相同的版本为我解决了这个问题。

推荐阅读