使用 时react-loadable，您不会轻易被那些异步组件中抛出的错误警告，例如错误的导入。

我希望能够在开发环境中禁用 react-loadable （绕过它，并同步加载所有内容）并在生产中启用它，但我不知道如何覆盖 react-loadable 以使其工作：

有没有办法做到这一点？

例如，假设我们有两个具有共同导入的组件：

和

然后将这些组件异步加载到另一个组件中，如下所示：

“A”和“B”块都将包含“Hello”代码，将重复的代码传递给浏览器。

在我的研究中，我确定如果在任何其他非异步加载的组件中导入“Hello”，则不会发生这种情况。在这种情况下，它被捆绑到“主”块中，而不是“A”和“B”块中。

虽然这是一种选择，但它还有很多不足之处。本指南演示了如何配置 webpack 以创建一个“通用”模块，这看起来很理想，因为它不需要任何代码重组来达到预期的效果。

但是，webpack 配置不受 CRA 限制。

这里有更好的解决方案吗？

我有一个加载脚本的简单函数：

在我迁移到 NextJS 之前，我使用以下命令导入脚本：import creditCardScript from "./creditCardScript".

Sine NextJS 在 Node 中呈现组件服务器端，需要注意确保任何引用的代码window（特定于浏览器）不会被调用，直到componentDidMount.

NextJS 通过提供动态导入（ react-loadable的包装器）解决了这个问题：

• 仅在需要时加载组件，
• 提供仅在客户端加载组件的选项 ( ssr: false)。

我继续执行动态导入：

在componentDidMount：

但我得到了这个： Uncaught TypeError: Cannot call a class as a function

我试图将函数转换为类并使用构造函数传入args，但我的代码现在静默失败。

我正在使用 react 应用程序，并且正在使用react-loadableand react-redux。当我开始项目时，我没有使用react-reduxLoadable 组件，并且运行良好。但现在我想使用 redux（我正在学习......）但我无法让它工作:(

我不知道我必须做什么。

谢谢！（：

错误

错误图片

index.js

应用程序.js

请在标记为重复之前正确阅读此内容，我向您保证，我已阅读并尝试了每个人在 stackoverflow 和 github 上针对此问题提出的所有建议。

我的应用程序中有一条路线，如下所示；

路由渲染Routes渲染一个切换用户角色的组件，并基于该角色延迟加载正确的路由组件，该路由组件渲染主页面的开关。简化后如下所示。

然后是路由组件

所以问题是每当用户从“/”导航到“/second”等...应用程序重新渲染Routes，这意味着角色切换逻辑被重新运行，用户特定的路由被重新加载和重新渲染，页面上的状态是丢失的。

我尝试过的事情；

我在应用程序组件中渲染主要路线组件的方式一定有问题，但我很难过，有人能解释一下吗？另请注意，这与 react-router 的开关无关。

编辑：我已经修改了我的一个旧测试项目来演示这个错误，您可以从https://github.com/Trackerchum/route-bug-demo克隆 repo - 一旦 repo 被克隆，只需在 root 中运行 npm install目录和 npm 启动。当重新渲染/重新安装 Routes 和 SystemAdminRoutes 时，我已将其记录到控制台

编辑：我已经在 GitHub 上打开了一个关于这个的问题，可能的错误

在每次路径更改时路由重新渲染组件，尽管路径为“/”

所以，我正在从一个未修复的错误转移react-async-component到bc。有这个漂亮的功能，可以让你告诉它永远不要在服务器上加载组件。react-loadablereact-async-componentserverMode

这对于管理屏幕很有用，特别是对于引用window服务器上对象的某些 3rd 方组件，而不检查其是否存在。

当我使用preloadAll时，它实际上得到了一切，因为似乎没有办法从选择中排除项目。或者有吗？

很高兴在通话中看到一个serverMode选项。Loadable但与此同时，有没有办法将某些模式排除preloadAll在服务器上？

我想将我的反应代码与服务器端渲染分开。为此，我有两个选择。

• 可加载组件
• 可反应加载

可加载组件

React 文档建议对服务器渲染的应用程序使用可加载组件。但它的 NPM 每周下载量很少。

可反应加载

与前一个相比，这个包的 NPM 每周下载量非常高，但根据loadable-components文档，这个包不再维护。

长期以来，react-loadable 是 React 代码拆分的推荐方式。但是，今天它不再维护，并且与 Webpack v4+ 和 Babel v7+ 不兼容。文档链接

请用适当的包装引导我。

I am going to implement code splitting with server side rendering. For that i am using react-loadable.

But, i am getting following error while using import.

I show other posts but, nothing work for me.

You may need an appropriate loader to handle this file type. | var Content = (0, _reactLoadable.default)({ | loader: function loader() { return import('./components/Content'); | },

My code looks like:

package.json

webpack.config.js

我遇到了问题，我的本地代码工作正常，但是在服务器上它有一个第一次加载错误，但我不知道错误来自哪里，我需要帮助如何防止预加载！

我有一张幻灯片，它呈现了一堆带有一些信息的卡片。卡片高度基于最高卡片的高度。我正在使用react-slick我的滑块。在第一次渲染时，卡片都设置为一个高度，但是当我刷新浏览器时，卡片的高度不同。

我的代码如下

滑块.jsx

我知道 Loadable 是异步组件，这可能是它没有在浏览器刷新时设置高度的原因