问题标签 [loadable-component]

我正在一个使用以下项目的项目中工作：

• 反应/react-dom@16.9.0
• @loadable/组件
• 样式化组件
• 反应路由器dom

该应用程序呈现服务器端和客户端。

我正在使用@loadable/component这种方式动态代码拆分。

路由器.tsx

加载页面时，控制台上出现此错误，页面似乎闪烁了一秒钟。

当我检查双方（服务器/客户端）的输出时，它们是相同的。

当我像下面这样删除时@loadable/component，它可以工作并且错误消失了。

路由器无loadable.tsx

似乎与此有关，@loadable/component但我不是 100% 确定。

我正在尝试使用 Razzle 在 Now 上部署可加载组件示例。

now.json我在项目的根目录中添加了以下内容：

现在，构建完成没有错误，但在运行时，我有以下错误：

2019-10-17T11:39:18.319Z a082c52f-af85-4646-80ca-b946928f8b05 错误：在 Function.Module._resolveFilename (module.js:547) 中找不到模块“/var/task/build/loadable-stats.json” :15) 在 Function.Module._load (module.js:474:25) 在 Module.require (module.js:596:17) 在 smartRequire (/var/task/node_modules/@loadable/server/lib/util. js:24:32) 在新的 ChunkExtractor (/var/task/node_modules/@loadable/server/lib/ChunkExtractor.js:173:50) 在 /var/task/build/server.js:1:7600 在层。处理 [as handle_request] (/var/task/node_modules/express/lib/router/layer.js:95:5) 在下一个 (/var/task/node_modules/express/lib/router/route.js:137:13 ) 在层的 Route.dispatch (/var/task/node_modules/express/lib/router/route.js:112:3)。处理 [as handle_request] (/var/task/node_modules/express/lib/router/layer.js:95:5)

有人已经遇到过这个错误吗？如果是这样，我该如何解决这个问题？有输入吗？

谢谢，

我正在尝试预取脚本，以便我可以渲染（预取）用户将更快导航到的 React 组件。我的脚本正在被预取，但它们似乎没有被使用。当我转到另一个页面（例如 Look）时，再次获取 Look 捆绑包，并且根本不使用预取的捆绑包。

我已经发布了每个请求的标头的两个屏幕截图。预取请求Accept在其标头中具有不同的值（由 webpack 发出的请求）。值也不同，我相信这Cookie与 Google Analytics 相关，但我认为这不是问题所在。

在键入此内容时，我注意到 Chrome 中的“预览/响应”选项卡显示“无法加载响应数据”（见第一个屏幕截图），所以我检查了 Firefox，那里的响应都是相同的，但我猜这可能是一个指标怎么了。

TL;DR：为什么我的预取脚本没有被使用？

我@loadable/component用于预取组件，示例代码：

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

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

在 server.js 中

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

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

我正在尝试为 SSR 未弹出的 CRA 应用程序设置可加载组件。我正在使用 Craco 覆盖 Webpack 配置，它似乎正在工作，因为loadable-stats.json正在生成客户端。当我运行构建命令时，这些块是根据 id 命名的，因为我相信react-scripts它是硬连线的，可以在生产模式下运行。所以对于我的服务器配置，我决定也用 id 来命名这些块。但不幸的是，chunkNames 似乎是服务器统计文件中模块的路径，它是由生成的@loadable/webpack-plugin，而不是 id。实际的块由“id”命名，但我可以在文件夹中看到它们。

这是我server.js试图读取块的代码。

因此，当我运行nodeExtractor（从服务器统计文件中读取）来收集块然后webExtractor（使用客户端统计文件）时，getScriptElements我得到一个空的可加载块数组。如果我只使用webExtractor它会抛出一个错误chunkNameFromServerStatsFile not found。

我的服务器 webpack 配置使用server.js包含 Express 代码的文件作为入口点，而客户端的 Webpack 配置使用应用程序的索引文件作为入口。我得到一个空的 {} 作为服务器requireEntrypoint结果。我不太确定该调用会发生什么，实际文档不是很清楚。

有些人也在webExtractor服务器代码中使用 only 并且它似乎对他们有用，但我不断收到错误，因为它仍在尝试映射服务器端块，它在webExtractor.

任何帮助将不胜感激。谢谢！

我已经尝试了一段时间，但无济于事，让我的配置适用于具有以下特征的应用程序：

1. 打字稿
2. 反应
3. 使用可加载组件的服务器端渲染
4. 网页包

出于某种原因，这个片段，它应该找到在服务器端渲染期间使用的所有块，它不起作用：

它返回的是server.js捆绑包而不是所需的客户端/供应商捆绑包。我没有在此处发布所有代码，而是将所有代码推送到我在 github 上的分支：https ://github.com/markdstevens/ssr-ts-react-webpack-boilerplate/tree/ssr-with-code-splitting

我必须在 webpack 或可加载组件中缺少一些配置，但我到处寻找，似乎找不到问题。任何提示都将受到欢迎。谢谢！

我正在尝试在使用 SSR、Redux 和路由器的应用程序中使用带有 React 的@loadable/component 库。

该文档提供了一个示例应用程序代码，但它没有路由器和 Redux（无需传递状态和渲染路由）。示例中的文件src/server/main.js包含以下行：

但是我的应用程序的服务器端 JSX 看起来像这样（没有 < App/>），我有提供者和静态路由器组件包装器：

你能告诉我，我如何使用store和StaticRouter使用renderRoutes(...)它，@loadable/component以便我的 SSR 工作？

谢谢！

The loadable component on SSR not rendering on the server but works fine on the client-side. In my main container header and footer is rendering on server only component with loadable is not loading on server

react version

server.js

Client.js

Webpack plugin also added. stats.json file is created with chunk hash values. What am I doing wrong here?

我们的电子商务平台已经投入生产，但我们遇到了奇怪的 ChunkLoadError。此错误随机发生，不可复制。当我们试图打开失败的文件时，它就在那里并且可以正常加载。

如果用户得到这个错误，他会得到白屏（逻辑上），但刷新后一切都很好。

我们正在 React（最新）、Express（最新）上运行 SSR 电子商务

我们的 webpack / razzle 配置

多个错误

这是随机挑选的痕迹

因此，react-lazy 和 suspense 在 gatsby 中不起作用，因为 React.lazy 和 Suspense 还不能用于服务器端渲染。但是，我们可以使用可加载组件（https://loadable-components.com/docs/getting-started/）来代替。因此，我在 gatsby 中使用了可加载组件，并且还在 gatsby-config.js 文件中使用并配置了 gatsby-plugin-loadable-components-ssr。但是，我收到“WebpackError: Invariant Violation: loadable: SSR requires @loadable/babel-plu gin, please install it。” 在 netlify 上部署它时。所以，我无法拆分 js 代码。如果有人以前尝试过或过去发生过类似的事情并已修复它，请帮助我。