在现有Next.js应用集成tldraw时遇window未定义错误求助

这个问题是Next.js服务器端渲染（SSR）与依赖浏览器API的tldraw库冲突导致的——tldraw核心代码初始化时直接访问了浏览器环境的window对象，而Next.js在服务器端渲染阶段不存在该对象，因此抛出错误。很多开发者在Next.js中集成tldraw时都遇到过相同问题，以下是几种有效的解决方法：

方法1：动态导入tldraw并禁用SSR #

使用Next.js的dynamic函数导入tldraw组件，强制其仅在客户端加载：

import dynamic from 'next/dynamic';

// 动态导入tldraw，禁用服务器端渲染
const Tldraw = dynamic(() => import('@tldraw/tldraw'), {
  ssr: false,
  loading: () => <div>加载绘图组件中...</div> // 可选加载状态提示
});

export default function TldrawPage() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Tldraw />
    </div>
  );
}

方法2：在客户端环境中初始化tldraw #

通过useEffect钩子确保仅在浏览器环境下加载和初始化tldraw：

import { useEffect, useState } from 'react';
import type { Tldraw } from '@tldraw/tldraw';

export default function CustomTldraw() {
  const [tldrawInstance, setTldrawInstance] = useState<Tldraw | null>(null);

  useEffect(() => {
    // 仅在客户端执行导入和初始化
    if (typeof window !== 'undefined') {
      import('@tldraw/tldraw').then((module) => {
        const container = document.getElementById('tldraw-container');
        if (container) {
          const instance = module.createTldraw(container);
          setTldrawInstance(instance);
        }
      });
    }

    // 组件卸载时清理实例
    return () => {
      tldrawInstance?.destroy();
    };
  }, []);

  return (
    <div
      id="tldraw-container"
      style={{ width: '100vw', height: '100vh' }}
    />
  );
}

方法3：检查版本兼容性与官方配置 #

你的依赖版本组合（@tldraw/tldraw@1.28.0 + next@13.0.5）理论上兼容，但如果上述方法无效：

• 尝试升级Next.js到13.4及以上版本（App Router的客户端组件支持更完善）
• 确认是否遗漏tldraw官方文档中针对Next.js的特殊配置步骤

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