Webpack require/import在客户端而不是服务器上懒散地运行

Webpack require/import acts lazily on client, not on server

本文关键字:服务器 运行 require import 客户端 Webpack      更新时间:2023-09-26

很难隔离这个问题,所以请耐心等待。

我有两个文件,叫做index.jsfeed.js。它们都是同构运行的。

index.js

const feed = require('./feed');
console.log('feed', JSON.stringify(feed));
console.log('feed.default', feed.default);
(global || window).feed = feed;

feed.js

console.log('inside feed');
export default 5;

在服务器上,按顺序打印以下内容:

inside feed
feed {"default":5}
feed.default 5

但在客户端上,输出是

feed {}
feed.default undefined
inside feed

当我在客户端上实际检查window.feed时(当然,这是在所有这些发生之后),它配置正确,并且有所有正确的数据

有人知道为什么会发生这种情况,或者我如何才能干净地预防或处理它吗?我认为feed应该始终由require之后的语句同步地填充正确的内容。

webpack配置有点复杂,但大部分与此相同。

我愿意相信这是某种竞争条件(服务器已经要求它了),但我不明白为什么一开始它会被懒散地加载。因为我使用的是babel节点和react热加载器,所以我无法准确地了解webpack_require内部发生的事情,但我很确定这不是预期的行为,所以我认为我做错了什么。

您为客户端启用了一堆webpack优化插件。你真的知道他们做什么以及他们是怎么做的吗?尝试禁用它们,尤其是AggressiveMergingPlugin。使您的配置尽可能简单。

我唯一一次遇到类似的问题是,我不小心有两个模块相互需要。也许其中一个插件正在做一些模块重新排序的魔术,并以某种方式导致类似的情况出现。只是猜测。

否则,请检查webpack生成的捆绑包的内容。debugger;语句对于跳转到正确的位置非常有用。