react-pdf 5.7.1编译报错：无法解析'yoga-layout/sync'模块

核心问题分析 #

react-pdf 5.7.1原本依赖内部封装的@react-pdf/yoga，但子依赖@react-pdf/layout被包管理器自动升级到了不兼容版本——该版本将Yoga的导入路径从@react-pdf/yoga改为了yoga-layout/sync，导致编译时找不到对应模块。

可行解决方案 #

1. 锁定@react-pdf/layout的兼容版本 #

在package.json中添加版本锁定规则，强制@react-pdf/layout使用与react-pdf 5.7.1匹配的旧版本：

• 若使用npm（版本≥8.3.0），添加overrides：

  "overrides": {
    "@react-pdf/layout": "2.0.18"
  }
  

• 若使用yarn，添加resolutions：

  "resolutions": {
    "@react-pdf/layout": "2.0.18"
  }
  

执行npm install或yarn install重新安装依赖，确保版本被锁定。

2. 正确生成patch-package补丁 #

如果需要保留当前@react-pdf/layout版本，修正patch-package的使用流程：

• 手动修改node_modules/@react-pdf/layout/lib/index.es.js中的导入路径为import Yoga from '@react-pdf/yoga';
• 执行npx patch-package @react-pdf/layout生成补丁文件
• 将生成的补丁文件提交到版本控制，后续执行npm install时会自动应用补丁
• 注意：使用pnpm时需额外配置pnpm.overrides，并确保patch-package兼容pnpm环境

3. 降级react-pdf到稳定小版本 #

若上述方案无效，可直接降级react-pdf到5.7.1之前的稳定版本（如5.6.0），该版本的子依赖未出现导入路径变更问题：

npm install react-pdf@5.6.0

内容的提问来源于stack exchange，提问作者Jonas