故障排查GitHub issue3 分钟阅读排错/错误码

解决FastGPT私有化部署pnpm dev时window未定义报错问题

私有部署FastGPT完成后,执行pnpm dev命令时出现报错,核心报错文本为ReferenceError: window is not defined。

现象

私有部署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,部署步骤未出现异常报错。

排查步骤

  1. 根据调用栈定位到报错相关的组件文件src/components/Markdown/img/EChartsCodeBlock.tsx,确认该组件的依赖引入情况。
  2. 检查该组件是否在未做客户端限制的情况下直接导入了echarts库。
  3. 确认当前项目使用Next.js框架,服务端渲染阶段确实不存在window全局对象。
  4. 核对当前使用的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的报错,项目可以正常启动运行。

来源:FastGPT GitHub issue