Next.js集成Fabric.js遇Canvas/Rect未定义错误求解决方案

问题根源 #

1. 旧版fabric包已废弃，官方现在维护的包是@fabricjs/fabric，直接安装fabric会收到废弃提示
2. Next.js的SSR（服务端渲染）环境下，Fabric.js无法正常初始化——它依赖浏览器的DOM和Canvas API，服务器端不存在这些对象

分步解决方案 #

1. 替换为官方维护的Fabric.js包

卸载旧包，安装新版：

npm uninstall fabric
npm install @fabricjs/fabric

2. 处理Next.js SSR兼容性问题

Fabric.js只能在浏览器环境运行，必须确保代码仅在客户端执行，有两种常用方式：

方式一：动态导入组件（推荐）

用next/dynamic导入Fabric相关组件，禁用SSR：

import dynamic from 'next/dynamic';

// 导入你的画布组件，禁用服务端渲染
const FabricCanvas = dynamic(() => import('./components/FabricCanvas'), {
  ssr: false,
});

// 在页面中使用
export default function Home() {
  return <FabricCanvas />;
}

方式二：在客户端初始化Fabric

在组件内用useEffect判断浏览器环境后再导入Fabric：

import { useEffect, useState } from 'react';

export default function FabricCanvas() {
  const [fabric, setFabric] = useState(null);

  useEffect(() => {
    // 仅在浏览器环境执行
    const initFabric = async () => {
      const { fabric } = await import('@fabricjs/fabric');
      setFabric(fabric);
      
      // 初始化画布
      const canvas = new fabric.Canvas('canvas-container');
      // 创建矩形示例
      const rect = new fabric.Rect({
        left: 100,
        top: 100,
        width: 80,
        height: 80,
        fill: '#0070f3'
      });
      canvas.add(rect);
    };
    initFabric();
  }, []);

  return <canvas id="canvas-container" width={1000} height={600} />;
}

3. 兼容讲师的旧版代码（可选）

如果必须和讲师代码版本一致，可以安装旧版fabric（注意旧包已停止维护）：

npm install fabric@5.3.0

同时同样需要处理SSR问题，确保仅在客户端初始化Fabric。

4. 检查导入语法

新版@fabricjs/fabric的正确导入方式是：

// 正确
import { fabric } from '@fabricjs/fabric';

// 错误（旧版语法）
import fabric from '@fabricjs/fabric';

内容的提问来源于stack exchange，提问作者신재완