使用Electron+Next.js(Nextron)+Webpack时draw2d.js报window未定义错误

原因分析 #

draw2d.js在模块初始化阶段直接依赖window全局对象，但Nextron基于Next.js，默认会进行服务端渲染（SSR）。在SSR过程中，Node.js环境不存在window对象，导致模块加载时抛出ReferenceError。

解决方案 #

1. 用Next.js动态导入禁用SSR #

将依赖draw2d的组件设置为仅客户端渲染，通过Next.js的dynamic函数并指定ssr: false：

// pages/home.tsx
import dynamic from 'next/dynamic';

// 禁用SSR，确保组件只在客户端加载
const LayoutEditor = dynamic(() => import('../components/layout-editor'), {
  ssr: false,
});

export default function Home() {
  return (
    <div>
      <LayoutEditor />
    </div>
  );
}

2. 在组件挂载后延迟导入draw2d #

在组件的useEffect钩子中动态导入draw2d，确保代码仅在客户端执行：

// components/layout-editor.tsx
import { useEffect, useRef, useState } from 'react';

export default function LayoutEditor() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [draw2dLoaded, setDraw2dLoaded] = useState(false);

  useEffect(() => {
    // 仅在客户端环境加载draw2d
    const initDraw2d = async () => {
      if (typeof window === 'undefined') return;
      
      const draw2d = await import('draw2d');
      // 初始化draw2d画布
      if (canvasRef.current) {
        const canvas = new draw2d.Canvas(canvasRef.current);
        // 这里添加你的绘制逻辑
      }
      setDraw2dLoaded(true);
    };

    initDraw2d();
  }, []);

  if (!draw2dLoaded) {
    return <div>加载中...</div>;
  }

  return <canvas ref={canvasRef} width={800} height={600} />;
}

3. 配置Webpack模拟全局window（不推荐） #

如果上述方法无效，可在Nextron的Webpack配置中为客户端构建注入全局window对象（仅针对渲染进程）：

// nextron.config.js
module.exports = {
  webpack: (config, { isServer, dev }) => {
    if (!isServer) {
      // 客户端构建时模拟window
      config.plugins.push(
        new webpack.DefinePlugin({
          'window': 'self'
        })
      );
    }
    return config;
  },
};

注意：此方法可能引发其他兼容性问题，仅作为备选方案。

关键注意事项 #

• 确保所有依赖window的代码仅在**渲染进程（客户端）**执行，不要在主进程或SSR阶段加载draw2d。
• Nextron中主进程代码位于main目录，渲染进程代码位于renderer目录，避免混淆两者的执行环境。

内容的提问来源于stack exchange，提问作者Diogo André Silvares Dias