FabricJS 6.4.3添加图片时classList空指针错误求助

在React应用中基于FabricJS开发画布工具，使用最新NPM包6.4.3版本时，无法向画布添加图片。FabricJS近期切换为TypeScript后，原有的fabric.image.fromUrl改为FabricImage，但实现时触发错误：

TypeError: Cannot read properties of null (reading 'classList') at Qo.setElement

以相同方式实现的FabricText可正常工作。

错误栈信息 #

CodePen示例错误栈 #

Uncaught TypeError: Cannot read properties of null (reading 'classList')
    at n.setElement (Image.ts:236:13)
    at new n (Image.ts:205:10)
    at pen.js?key=pen.js-5015e621-c65c-5079-a72d-17f3c0ea1cfa:35:23
    at Mb (react-dom.production.min.js:111:280)
    at Yh (react-dom.production.min.js:121:327)
    at R (react.production.min.js:11:265)
    at va (react.production.min.js:12:403)
    at react.production.min.js:25:14

本地开发环境错误栈 #

TypeError: Cannot read properties of null (reading 'classList')
    at Qo.setElement (http://localhost:3000/static/js/bundle.js:160422:172)
    at new Qo (http://localhost:3000/static/js/bundle.js:160415:251)
    at http://localhost:3000/static/js/bundle.js:11400:23
    at commitHookEffectListMount (http://localhost:3000/static/js/bundle.js:82913:30)
    at commitPassiveMountOnFiber (http://localhost:3000/static/js/bundle.js:84406:17)
    at commitPassiveMountEffects_complete (http://localhost:3000/static/js/bundle.js:84378:13)
    at commitPassiveMountEffects_begin (http://localhost:3000/static/js/bundle.js:84368:11)
    at commitPassiveMountEffects (http://localhost:3000/static/js/bundle.js:84358:7)
    at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:86243:7)
    at flushPassiveEffects (http://localhost:3000/static/js/bundle.js:86195:18)

代码示例 #

报错的FabricImage代码 #

const backImg = new FabricImage(testImage, {
              left: 0,
              top: 0,
              height: 400,
              width: 500,
              selectable: false,
              hasControls: false,
              hasBorders: false
              })
canvas.add(backImg).setActiveObject(backImg);

正常工作的FabricText代码 #

const recttext = new FabricText('Printable Area', {
                  fontSize: 14,
                  fontFamily: 'sans-serif',
                  left: 253,
                  top: 80,
                  fill: 'rgba(0,0,0,0.3)',
                  selectable: false,
                  hasControls: false,
                  hasBorders: false
                  });
                  
canvas.add(recttext);

已尝试操作 #

• 检查FabricJS仓库未找到相关问题
• 已在仓库提交issue等待回复
• 注释图片添加代码后，画布可正常创建并添加矩形和文本
• 检查TypeScript接口，未发现必填参数遗漏

求助社区：是否是语法错误或遗漏了必要参数？

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