问题标签 [react-loadable]

我正在通过离线插件通过 react-loadable 和服务工作者使用代码拆分。它在 chrome 和 firefox 中完美运行。

但它在 Safari 上无法正常工作。当我转到不同的路线时，会为该路线加载块 js，它来自服务工作者，但服务工作者返回加密的 js（我猜），例如：N��}���S���� ��^+����

Safari 版本 - 11.1.1 同样发生在 iOS Safari 中

我遇到了一个问题，尝试通过使用在我的反应 APP 中使用块

可反应加载

它在开发模式下的 webpack-dev-server 中完美运行，但是当我构建项目并将其提供给服务器时，加载了异步组件，但其中的代码没有被执行。所以页面只用加载器渲染，加载器应该在加载组件之前渲染。控制台或其他东西没有错误，一切都很清楚，块脚本在加载时插入到 html 头部，没有任何反应:(

并渲染

UPD：有错误传递给加载组件类型错误：无法在 o（http://localhost:3000/assets/js/bundle-8866517f8f287a1d3c6b.js:1:318读取 undefined↵ 的属性“调用”

通过安装修复它

babel-plugin-syntax-动态导入

并将 exctractCssPlugin 选项更新为

新的 exctactCss({filename : 'css/style.css' , allChunks: true})

我是新来的反应。在我的反应应用程序中进行路由时，我收到一个错误（未找到模块：无法解析 'react-lodable'） 。

这是我的代码：

路由.js：

嗨，我是 react 新手，我想用 来实现routing，Loadable但它不起作用它在http://localhost:3000/user或http://localhost:3000/时显示空白页

你能纠正我哪里做错了吗。我也越来越——

警告：道具类型失败：提供给component的道具类型无效，应为。stringRoutefunction

我的代码是：

主页.js

用户.js：

应用程序.js：

index.js：

我只是尝试将 react-loadable 添加到我的项目中，并且在我访问我的管理页面之前它工作正常。我目前有 webpack 4、react-router 4.2.2 和 react-loadable 5.4.0。我的approuter中有这样的东西：

和可加载用户：

访问localhost:3000/admin/users给了我以下信息：

因为4.js（由 react-loadable 拆分的文件）不在 /admin 下，而是直接在 root 下。

有任何想法吗？感觉就像是反应路由器或 webpack 问题......

我的 webpack 配置：

我在使用React Loadable和使用 Webpack 3.11 的基于路由的代码拆分时遇到了问题。

当我尝试在服务器上渲染我的应用程序时，我的异步模块会立即解析，而无需等待承诺。因此 SSR 输出变为<div id="root"></div>。

应用程序.js：

我已经用 React Loadable 定义了我的异步路由组件，如下所示：

路由.js

WithSettings.js

我已经设法将其缩小到WithSettings我用来包装我的路由组件的 HOC。如果我不使用WithSettingsHOC（与 Article 路由一样），那么我的 SSR 输出将等待异步导入完成，并且服务器生成的 html 包含与路由相关的标记（好！）。如果我确实使用了 HOC（与 Page 路由一样），那么模块会立即解析，并且我的 SSR 输出变为，<div id="root"></div因为它不再等待动态导入在渲染之前完成。问题是：我在所有路由中都需要 WithSettings HOC，因为它从服务器获取我需要呈现应用程序的所需数据。

谁能告诉我如何使用 HOC并将React Loadable 的异步组件用于路由组件，以便它在服务器上工作？

我正在使用 Create react app 和 service worker。但是，有时当我构建一个新版本时，一些 js 块仍然从服务工作者加载，它们不应该加载？而不是加载一个js文件，它实际上加载了一个html。清除缓存并重新加载页面后，一切正常。

1. 我没有在 Nginx 上缓存服务人员。每次我刷新页面时，都会从服务器加载 service worker 文件。

2. 我正在使用 react-loadable

我该如何解决这个问题？任何帮助将不胜感激。

我遇到了一个问题，react-loadable导致我的一个输入组件在状态更新后重新渲染并失去焦点。我已经进行了一些挖掘，但找不到其他人有这个问题，所以我认为我在这里遗漏了一些东西。

我正在尝试react-loadable根据用户选择的主题将组件动态包含到我的应用程序中。这工作正常。

./组件/应用

./components/AdminPanel

这是我的<ThemedSideBar />组件的样子：

./themes/Default/components/SideBar

./components/ThemeSettingPanel

./containers/ThemeSetting

./component/ThemeSetting

./components/common/TextField

当我的管理面板内的字段更新时，会触发状态更改。似乎这会触发react-loadable重新渲染我的<ThemedSideBar />组件，这会破坏我的输入并创建一个具有更新值的新组件。其他人遇到过这个问题吗？有没有办法停止react-loadable重新渲染？

编辑：这是请求的回购链接。

I'm using React Loadable to code split my components, but the problem is that certain components are referenced from multiple locations. For example, I have this component CarsModule, which is referenced in multiple areas like this:

What ends up happening in the dist/react-loadable.json file is that CarsModule looks like this:

When one of the pages goes to request it during server side rendering that imports it like this '../components/CarsModule', it gets undefined for the module (since the bundle's key is this "../../../../components/CarsModule"). I used the webpackChunkName to try and name those keys in the react-loadable.json file but no luck :(

I have chunk hashing going on inside my webpack prod file which looks like this:

However, there is no CarsModule.js file that is created. How can I solve this issue with multiple components importing the same module from different locations if react-loadable.json is going to use the import location as a key?

If I remove these other files that are doing different imports from my project, the react-loadable.json file will be generated referencing the CarsModule like so:

However, this isn't a very plausible solution because other components still need to reference that CarsModule. Any ideas what I'm doing wrong? Thanks in advance!

Here are my versions of react-loadable & webpack:

Here is my .babelrc file:

这基本上是我所有的代码。我正在运行 Hapi 并尝试使用 react-loadable 来服务器渲染我的 React 应用程序。

我在这里的代码中添加了很多缺失的部分。

它正确地呈现页面，因为我看到我的 React 应用程序在我的浏览器中呈现。尽管除非我禁用服务器上的缓存，否则我看不到“路由器”的任何内容。所以第一个请求没有渲染路由器，下面的请求渲染了。

在服务器上，总是console.log('modules:', modules)返回modules: []。不管缓存。因此，即使我禁用缓存，刷新页面两次以查看路由器工作，模块仍然是空的。

我有点迷茫，因为它应该可以工作..一切看起来都很好。