NextJS 12.2.5随机全量刷新，报TypeError: Cannot read properties of undefined (reading 'call')

环境 #

• NextJS 版本：12.2.5
• 开发环境（出现Fast Refresh相关警告）

错误现象 #

网站内导航时随机出现SPA导航失效，触发页面全量刷新，服务器抛出以下错误：

warn - Fast Refresh had to perform a full reload.
TypeError: Cannot read properties of undefined (reading 'call')
at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1709383711260:373:21)
at eval (webpack-internal:///./img/index.js:122:79)

错误会随机出现在/img/index.js的不同行，刷新页面后可正常导航至目标页面。

已排查信息 #

• 项目通过/img/index.js统一导入所有图片并导出为一个对象
• 图片未存储在public文件夹中
• 注释掉所有对该图片导出文件的导入后，问题消失

可能的解决方案 #

1. 检查图片导入与导出逻辑 #

• 确认/img/index.js中所有图片的导入路径完全正确，不存在拼写错误或文件缺失的情况（Fast Refresh在热更新时对模块状态的处理比全量加载更敏感）
• 确保导出对象的每个成员都是图片模块的默认导出，避免引用非默认属性，示例：

  // 推荐的导出方式
  import img1 from './img1.png';
  import img2 from './img2.jpg';
  
  export default {
    img1,
    img2
  };
  

• 排查循环导入：检查是否存在其他模块导入该图片导出对象，同时又被该对象间接导入的情况

2. 调整NextJS/Webpack配置 #

• 检查next.config.js中是否有自定义webpack规则干扰了图片模块的热更新处理，确保NextJS默认的图片处理逻辑未被修改
• 临时禁用Fast Refresh验证问题根源（仅用于排查）：在next.config.js中添加配置：

  module.exports = {
    fastRefresh: false
  };
  

  若禁用后问题消失，说明问题与Fast Refresh对图片模块的热更新处理直接相关

3. 升级NextJS版本 #

12.2.5属于较旧版本，可能存在Fast Refresh处理图片模块的已知bug，建议升级到12.x分支的最新稳定版，或根据项目兼容性考虑升级到13.x版本（注意适配App Router/Page Router差异）

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