使用react-pdf/renderer实现网站PDF下载功能时遭遇fontkit 'create'导出错误的求助

我之前也碰到过这个完全一样的问题，折腾了好一阵才解决，结合你的情况（React 17.0.2，试过多个react-pdf版本），给你几个可行的方案：

问题重现 #

你遇到的错误是：

./node_modules/@react-pdf/font/lib/index.browser.es.js Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit')

这个问题本质是**@react-pdf/renderer依赖的fontkit版本和你当前项目中安装的fontkit版本不兼容**——新版本的fontkit移除了create导出，而react-pdf的部分版本还在依赖这个API。

解决方案1：锁定兼容的fontkit版本 #

这是最直接有效的方法，根据react-pdf的版本选择对应的fontkit版本：

• 如果你用的是react-pdf v3.x：安装fontkit@2.x版本
• 如果你用的是react-pdf v2.x：安装fontkit@1.x版本

执行命令安装指定版本：

# 针对react-pdf v3.x
npm install fontkit@2.0.2
# 或者用yarn
yarn add fontkit@2.0.2

安装完成后重新启动项目，应该就能解决这个导入错误了。

解决方案2：用package.json强制统一依赖版本 #

如果你的项目里有其他依赖也安装了fontkit，导致版本冲突，可以在package.json里添加resolutions字段强制所有依赖使用同一个fontkit版本：

{
  "resolutions": {
    "fontkit": "2.0.2"
  }
}

然后重新安装依赖：

# npm用户需要先安装npm-force-resolutions工具（如果没装的话）
npx npm-force-resolutions
npm install

# yarn用户直接执行
yarn install

解决方案3：优化你的PDF下载代码（可选） #

顺便提一下，你当前的下载代码可以简化，不需要手动调用updateContainer，react-pdf的pdf函数可以直接接收组件实例生成PDF：

onClick={async () => {
  // 直接传入组件生成PDF blob
  const blob = await pdf(<InvoicePDF />).toBlob();
  saveAs(blob, "document.pdf");
}}

这样代码更简洁，也避免了不必要的API调用。

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