React Native 0.63.4集成jsPDF 2.5.1遇canvg模块解析错误求助

错误信息：Error: While trying to resolve module canvg from file D:\Emx-Elb\emx-elb\node_modules\jspdf\dist\jspdf.es.min.js, the package ...\node_modules\canvg\package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (...\node_modules\canvg\lib\index.cjs. Indeed, none of these files exist:

解决办法 #

1. 降级jsPDF到兼容版本 #

高版本jsPDF依赖的canvg模块使用了React Native Metro打包器默认不支持的CJS模块格式，降级到2.3.1版本可直接规避此问题：

npm install jspdf@2.3.1 --save
# 或使用yarn
yarn add jspdf@2.3.1

安装完成后重新导入jsPDF测试即可。

2. 安装兼容的canvg版本并配置Metro支持CJS模块 #

若不想降级jsPDF，可手动指定安装兼容的canvg版本，并修改Metro配置以支持CJS扩展名：

• 安装指定版本的canvg：

npm install canvg@3.0.10 --save
# 或使用yarn
yarn add canvg@3.0.10

• 修改项目根目录的metro.config.js，添加对.cjs文件的解析支持：

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const defaultConfig = await getDefaultConfig();
  const { resolver: { sourceExts } } = defaultConfig;
  
  return {
    ...defaultConfig,
    resolver: {
      ...defaultConfig.resolver,
      sourceExts: [...sourceExts, 'cjs'],
    },
  };
})();

• 重启Metro打包服务并清除缓存：

npx react-native start --reset-cache

3. 改用React Native专用PDF生成库 #

如果上述方案仍不生效，推荐使用专为React Native设计的PDF生成库，兼容性更稳定：

• react-native-html-to-pdf：适合将用户数据转为HTML后生成PDF的场景：
  安装：

  npm install react-native-html-to-pdf --save
  # iOS需执行pod安装
  npx pod-install ios
  

  使用示例：

  import RNHTMLtoPDF from 'react-native-html-to-pdf';
  
  const generateUserPDF = async () => {
    const userData = { name: '张三', age: 25 };
    const htmlContent = `
      <h2>用户信息</h2>
      <p>姓名：${userData.name}</p>
      <p>年龄：${userData.age}</p>
    `;
    const options = {
      html: htmlContent,
      fileName: 'user_profile',
      directory: 'Documents',
    };
  
    const pdfResult = await RNHTMLtoPDF.convert(options);
    console.log('PDF生成路径：', pdfResult.filePath);
  };
  

• react-native-pdf-lib：支持更灵活的PDF内容编辑，适合自定义复杂PDF结构的场景。

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