React+Webpack5集成jsPdf报错：r.writeFileSync is not a function

错误原因分析 #

writeFileSync是Node.js fs模块的文件系统方法，浏览器环境本身不支持该API。出现这个错误的核心原因是：Webpack5不再自动polyfill Node.js核心模块，而jsPDF在浏览器环境下的文件保存逻辑被错误触发了Node端的代码路径。

解决方案步骤 #

1. 修正Webpack配置，屏蔽不需要的Node模块

在webpack.config.js中，明确将fs等浏览器不需要的Node模块设置为false，避免Webpack尝试解析它们：

const webpack = require('webpack');

module.exports = {
  // ...其他已有配置
  resolve: {
    fallback: {
      buffer: require.resolve('buffer'),
      process: require.resolve('process/browser'),
      stream: require.resolve('stream-browserify'),
      fs: false, // 关键：禁用fs模块解析
      path: false,
      crypto: false
    }
  },
  plugins: [
    // 正确配置ProvidePlugin，注入process和Buffer
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    })
  ],
  module: {
    rules: [
      // 解决部分ES模块导入的兼容性问题
      {
        test: /\.m?js$/,
        resolve: {
          fullySpecified: false
        }
      }
    ]
  }
};

2. 确保使用jsPDF的浏览器兼容版本

• 检查package.json中的jsPDF版本，建议升级到最新稳定版（如^2.5.1及以上），新版本对Webpack5的兼容性更好。
• 确保导入的是标准浏览器版的jsPDF，而非Node端专用版本：

import jsPDF from 'jspdf'; // 正确导入方式

3. 手动替换jsPDF的save()方法（备选方案）

如果上述配置仍未解决问题，可以绕过jsPDF内部的保存逻辑，直接用浏览器原生API实现下载：

import jsPDF from 'jspdf';

const generatePDF = () => {
  const doc = new jsPDF();
  doc.text('测试内容', 10, 10);
  
  // 手动生成Blob并触发下载
  const blob = doc.output('blob');
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(blob);
  downloadLink.download = '导出文档.pdf';
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(downloadLink.href);
};

4. 清理缓存并重新构建

修改Webpack配置后，删除项目的node_modules/.cache（如果使用webpack-dev-server）和dist目录，重新执行npm run build或npm start，确保配置生效。

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