本地开发一切正常,构建后访问详情页直接 500,服务端日志报 ReferenceError: window is not defined,堆栈指向一段读取屏幕宽度的代码,整站都打不开。日志里能对上时间点,这种反而好排。

组件在服务端渲染阶段就执行到了浏览器 API,Node 环境里没有 window,整页渲染在这里直接中断,这个错只会在服务端出现,本地很难发现。这一点先确认清楚,后面就不用反复试。

useEffect(() => setW(window.innerWidth), []);
const Map = dynamic(() => import('./Map'), { ssr: false });

「window is not defined」排查到最后往往是很小的一处差异,前面那些复杂猜测可以先放一放。先做最小复现,能稳定跑出来的问题,排查成本会低一个数量级。

别只看报错的最后一行,往上看几行,真正的起因通常在上面。同类问题如果隔一段时间又出现,多半是某个定时任务或重启流程把改动冲掉了。

处理上按这个顺序:浏览器 API 放进 useEffect 里,别在渲染阶段执行;第三方组件改成动态导入,同时把 ssr 关掉,别让它上服务端;访问之前先用 typeof window 判断一下环境,再取宽度。

结果对不对很好判断,构建产物在服务端渲染不再报错,详情页能正常打开,客户端交互也正常。

作者 9823189