Preact项目遇ReferenceError: window is not defined错误，常规方案无效求助

当Preact应用在预渲染阶段（Node环境）调用依赖浏览器全局对象window的Web API时，会触发ReferenceError: window is not defined错误。若if (typeof window !== "undefined")包裹代码无效，可尝试以下替代方案：

1. 用useEffect延迟执行浏览器相关代码 #

预渲染阶段不会执行useEffect钩子内的逻辑，只有组件在浏览器端挂载后才会运行。将依赖window的代码移入useEffect：

import { useEffect } from 'preact/hooks';

function MyComponent() {
  useEffect(() => {
    // 此处编写依赖window的Web API调用，例如：
    const userPref = window.localStorage.getItem('theme');
    // 后续业务逻辑
  }, []);

  return <div>组件内容</div>;
}

2. 动态导入浏览器专属模块 #

若问题源于第三方库或某模块本身依赖window，使用动态导入确保模块仅在浏览器环境加载：

import { useEffect } from 'preact/hooks';

function MyComponent() {
  useEffect(async () => {
    const browserModule = await import('./browser-specific-module.js');
    browserModule.initWebAPI();
  }, []);

  return <div>组件内容</div>;
}

3. 按需模拟Node环境的window（谨慎使用） #

仅适合简单场景，在预渲染入口文件（如src/server.js）顶部添加window模拟：

if (typeof window === 'undefined') {
  global.window = {};
  // 按需模拟所需属性，例如：
  window.localStorage = { getItem: () => null, setItem: () => {} };
}

注意：复杂Web API（如navigator、document）模拟成本高，易引发其他问题，优先前两种方案。

4. 利用Preact CLI的环境变量判断 #

Preact CLI自动注入process.env.BROWSER变量，浏览器端为true，预渲染阶段为false：

if (process.env.BROWSER) {
  // 仅在浏览器环境执行的代码
  window.addEventListener('resize', handleResize);
}

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