如何解决VITE与jsPDF集成时的兼容问题

问题根源 #

从Create React App迁移到Vite后，jsPDF报错require is not a function，原因是Vite原生只支持ES模块规范，而旧版jsPDF内部使用了Node.js的CommonJS require()语法加载依赖，Vite环境中没有这个全局方法，导致页面崩溃。

解决方案 #

方案1：升级jsPDF到最新版本 #

新版jsPDF已经完全适配ES模块，移除了CommonJS语法依赖，是最简洁的解决方式：

1. 安装最新版：

   npm install jspdf@latest
   # 或 yarn add jspdf@latest
   

2. 代码中用ES模块方式导入：

   import jsPDF from 'jspdf'
   
   // 正常使用jsPDF
   const generatePDF = () => {
     const doc = new jsPDF()
     doc.text('测试内容', 10, 10)
     doc.save('demo.pdf')
   }
   

方案2：用vite-plugin-commonjs兼容旧版jsPDF #

如果无法升级jsPDF（比如项目依赖特定版本），可以通过插件让Vite支持CommonJS模块：

1. 安装插件：

   npm install vite-plugin-commonjs --save-dev
   

2. 修改vite.config.js配置：

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   import commonjs from 'vite-plugin-commonjs'
   
   export default defineConfig({
     plugins: [react(), commonjs()],
   })
   

方案3：手动模拟require（应急方案，不推荐） #

如果以上两种方式都无法使用，可以临时在Vite中模拟require方法：
修改vite.config.js添加全局定义：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  define: {
    'require': (module) => import(module)
  }
})

注意：这种方式可能存在兼容性问题，仅作为临时应急使用。

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