在Fabric.js中调用库时遭遇jsdom.JSDOM构造函数错误求助

报错详情 #

fabric.js:25 Uncaught TypeError: jsdom.JSDOM is not a constructor
at node_modules/fabric/dist/fabric.js (fabric.js:25:23)
该错误会导致应用内画布无法正常加载，且已安装与Fabric.js内部依赖版本一致的jsdom 19。

解决方案 #

• 修正jsdom导入方式
  Fabric.js v5+对jsdom导入有明确要求，Node.js环境中，jsdom v19+需要解构导入构造函数：

// 正确写法
const { JSDOM } = require('jsdom');

如果仍用const jsdom = require('jsdom');再取jsdom.JSDOM，会导致Fabric.js找不到正确的构造函数。

• 严格匹配依赖版本
  核对Fabric.js package.json中jsdom的依赖范围（比如是^19.0.0还是~19.xx.xx），确保本地安装的jsdom版本完全落在这个范围内，避免小版本差异引发的兼容问题。

• 清理依赖缓存重装
  缓存异常可能导致依赖加载错乱，执行以下命令重置依赖：

rm -rf node_modules package-lock.json
npm install

• 检查构建工具配置
  如果用Webpack、Vite等构建工具，确认配置没有错误处理jsdom的导入。比如Webpack的resolve规则是否正确解析jsdom模块，避免tree-shaking误删必要导出。

• 手动注入DOM环境
  若以上方法无效，手动为Fabric.js指定DOM环境后再导入：

const { JSDOM } = require('jsdom');
const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
global.window = dom.window;
global.document = dom.window.document;
global.navigator = dom.window.navigator;

// 导入Fabric.js
const fabric = require('fabric');

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