在Next.js中使用Fabric.js时出现Cannot read properties of null (reading 'clearRect')错误

问题原因 #

这个错误通常由以下场景引发：

• DOM元素未完成挂载就初始化Fabric Canvas：fabricObj?.current可能为null，导致Canvas实例绑定到无效节点
• Canvas初始化时传入的width和height是字符串类型，Fabric内部渲染逻辑出现异常
• 图片加载完成后，Canvas实例已被销毁（比如组件提前卸载）

修复方案 #

1. 确保DOM元素存在再初始化Canvas #

创建Fabric Canvas实例前，先校验fabricObj.current的有效性，避免绑定到空节点。

2. 将宽高参数改为数值类型 #

Fabric Canvas的width和height要求是数字类型，字符串会触发内部渲染错误。

3. 防止回调执行时Canvas已销毁 #

在图片加载回调中，先检查Canvas实例是否仍有效，再执行背景图设置操作。

修改后的代码示例 #

import { fabric } from "fabric";
const { fabricObj, canvas, setCanvas, setObjectSelectForDelete } = useCanvasContext();
useEffect(() => {
    // 确认DOM元素已挂载
    if (!fabricObj?.current) return;

    // 用数值类型配置宽高
    const initCanvas = new fabric.Canvas(fabricObj.current, {
        width: 500,
        height: 400,
    });

    fabric.Image.fromURL(
        "https://flowbite.com/docs/images/examples/image-3@2x.jpg",
        function (img) {
            // 检查Canvas实例未被销毁
            if (!initCanvas) return;
            
            initCanvas.setBackgroundImage(
                img,
                initCanvas.renderAll.bind(initCanvas),
                {
                    scaleX: initCanvas.width / img.width,
                    scaleY: initCanvas.height / img.height,
                },
            );
        },
    );

    setCanvas(initCanvas);

    return () => {
        // 销毁前校验实例有效性
        if (initCanvas) initCanvas.dispose();
    };
}, [fabricObj]); // 添加fabricObj到依赖，确保DOM更新后重新初始化

额外注意事项 #

• 若使用Next.js App Router，需确保组件是客户端组件（添加'use client'指令），Fabric.js依赖DOM操作无法在服务端运行
• 若ref仍无法获取DOM元素，可尝试监听ref变化触发重新初始化，临时方案可短暂延迟初始化（不推荐长期使用）

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