在Vite+React-TS中集成whatsapp-web.js时出现依赖解析错误

问题原因 #

fluent-ffmpeg的入口文件会根据FLUENTFFMPEG_COV环境变量判断加载lib-cov（仅代码覆盖率测试场景存在）还是lib目录的文件。Vite构建时误触发了该变量检查，导致去查找不存在的lib-cov路径。

解决方案 #

方案1：配置Vite别名强制指向正确路径 #

在vite.config.ts中添加别名映射，直接将不存在的lib-cov路径指向实际存在的lib目录：

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      './lib-cov/fluent-ffmpeg': './lib/fluent-ffmpeg',
    },
  },
})

方案2：构建时显式设置环境变量 #

在package.json的构建脚本里，强制将FLUENTFFMPEG_COV设为false，确保加载正常的lib目录文件：

• Linux/macOS环境：

"scripts": {
  "build": "FLUENTFFMPEG_COV=false vite build"
}

• Windows环境：

"scripts": {
  "build": "set FLUENTFFMPEG_COV=false && vite build"
}

方案3：锁定稳定版本的fluent-ffmpeg #

部分版本的fluent-ffmpeg存在路径判断的兼容性问题，尝试安装指定稳定版本：

npm install fluent-ffmpeg@2.1.2 --save

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