现象
私有部署FastGPT完成后,执行pnpm dev命令时出现报错,核心报错文本为ReferenceError: window is not defined。该错误发生在页面生成阶段,调用栈指向echarts@5.4.1的依赖文件echarts/dist/echarts.js,以及项目中的src/components/Markdown/img/EChartsCodeBlock.tsx组件。
可能原因
该报错的核心原因是在Next.js服务端渲染(SSR)环境中,直接引入了依赖浏览器window全局对象的echarts库。Next.js服务端运行环境不存在浏览器的window对象,当服务端编译或渲染包含echarts依赖的代码时,就会触发window is not defined的错误。当前用户环境的node版本为v21.7.1,pnpm版本为8.15.5,部署步骤未出现异常报错。
排查步骤
- 根据调用栈定位到报错相关的组件文件
src/components/Markdown/img/EChartsCodeBlock.tsx,确认该组件的依赖引入情况。 - 检查该组件是否在未做客户端限制的情况下直接导入了
echarts库。 - 确认当前项目使用Next.js框架,服务端渲染阶段确实不存在
window全局对象。 - 核对当前使用的
echarts版本为5.4.1,确认该版本的兼容性配置。
解决与验证
可以通过Next.js的动态导入功能,将ECharts相关组件配置为仅在客户端渲染加载。具体操作示例:使用next/dynamic导入组件并关闭SSR选项,代码大致为import dynamic from 'next/dynamic'; const EChartsCodeBlock = dynamic(() => import('./EChartsCodeBlock.tsx'), { ssr: false });。修改完成后,重新执行pnpm dev命令,确认不再出现ReferenceError: window is not defined的报错,项目可以正常启动运行。