Next.js项目执行npm run build时出现TypeError: fetch failed错误求助

先解决lockfile缺失swc依赖的警告 #

next@12.1.6依赖特定版本的swc工具链，Node.js 20和npm 10的组合可能导致依赖解析异常，按以下操作修复：

• 删除项目根目录的package-lock.json文件
• 清除npm缓存：npm cache clean --force
• 重新安装全部依赖：npm install
  这会重新生成lockfile，确保swc相关依赖被正确拉取并安装，消除缺失警告。

再处理本地图片的TypeError: fetch failed错误 #

这个问题大概率和资源路径、版本兼容有关，逐一排查：

• 核对图片路径：检查代码中引用./assets/DamageContainer.jpg这类路径是否拼写正确，注意大小写（Linux/macOS环境下文件名大小写敏感）
• 调整静态资源存放目录：Next.js 12默认优先处理public目录下的静态资源，如果你的图片放在assets目录而非public，可以把assets文件夹移到public目录下，引用路径改为/assets/DamageContainer.jpg；或者在next.config.js中配置自定义资源目录（更推荐用官方默认的public目录）
• 降级Node.js版本：next@12.1.6官方仅支持Node.js 12.x、14.x、16.x、18.x，你当前用的Node.js 20.x不在支持范围内，这可能导致底层文件读取或fetch调用的兼容性问题。用nvm切换到18.x版本：nvm install 18 && nvm use 18，之后重新安装依赖再构建
• 检查构建环境变量：确保构建时使用默认的production环境，不要自定义不符合规范的环境变量，避免干扰资源处理逻辑

验证修复 #

做完上述操作后，先跑npm run dev确认开发环境能正常加载图片，再执行npm run build测试构建是否成功。

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