React-PDF 项目中解决 "Failed to execute 'fetch' on 'Window'" 错误的方法

在使用 React-PDF 库进行 PDF 渲染时，开发者可能会遇到一个常见的错误："TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation"。这个错误通常出现在 Node.js 环境下，特别是在版本 14 到 16 之间。

问题背景

React-PDF 是一个流行的 React 组件库，用于在浏览器和 Node.js 环境中生成 PDF 文档。当开发者尝试使用 Font.register() 方法注册字体时，可能会遇到上述错误。这个问题通常与字体编译过程有关，特别是在 Node.js 环境中运行时。

根本原因

该错误的根本原因是 React-PDF 内部使用的 cross-fetch 库在 Node.js 环境下的兼容性问题。在 Node.js 环境中，window 对象并不存在，而某些版本的 cross-fetch 可能会尝试访问 window 对象，导致非法调用错误。

解决方案

社区中已经验证了一个有效的解决方案，即强制项目使用 cross-fetch 的 3.1.8 版本。这可以通过以下两种方式实现：

1. 使用 package.json 的 overrides 配置：

"overrides": {
  "cross-fetch": "3.1.8"
}

2. 使用 package.json 的 resolutions 配置（适用于 yarn 或 pnpm）：

"resolutions": {
  "cross-fetch": "3.1.8"
}

实施建议

1. 首先检查你的项目是否直接或间接依赖了 cross-fetch 库
2. 根据你使用的包管理器（npm/yarn/pnpm）选择合适的配置方式
3. 清除 node_modules 和 lock 文件后重新安装依赖
4. 如果问题仍然存在，可以尝试清除缓存并重启开发服务器

注意事项

• 这个解决方案已被多位开发者验证有效
• 如果你同时在前端和后端使用 React-PDF，确保两边的环境都兼容
• 考虑测试不同版本的 cross-fetch 以找到最适合你项目环境的版本

通过实施这些解决方案，开发者应该能够顺利解决字体注册和 PDF 生成过程中的兼容性问题。