Next.js构建失败：HookWebpackError指定图片文件不存在

报错信息 #

Failed to compile.
HookWebpackError: File E:\Project Romulus\3D_portfolio\.next\static\media\eho.3e680d06.JPG does not exist.
at makeWebpackError (E:\Project Romulus\3D_portfolio\node_modules\next\dist\compiled\webpack\bundle5.js:28:308185)
at E:\Project Romulus\3D_portfolio\node_modules\next\dist\compiled\webpack\bundle5.js:28:105236
at eval (eval at create (E:\Project Romulus\3D_portfolio\node_modules\next\dist\compiled\webpack\bundle5.js:13:28771), :27:1)
at E:\Project Romulus\3D_portfolio\node_modules\next\dist\compiled\webpack\bundle5.js:28:68649
at E:\Project Romulus\3D_portfolio\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:414:143
-- inner error --
Error: File E:\Project Romulus\3D_portfolio\.next\static\media\eho.3e680d06.JPG does not exist.
at Job.emitDependency (E:\Project Romulus\3D_portfolio\node_modules\next\dist\compiled@vercel\nft\index.js:1:39473)
at async Promise.all (index 19)
at async Object.nodeFileTrace (E:\Project Romulus\3D_portfolio\node_modules\next\dist\compiled@vercel\nft\index.js:1:35430)
at async E:\Project Romulus\3D_portfolio\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:135:28
at async Span.traceAsyncFn (E:\Project Romulus\3D_portfolio\node_modules\next\dist\trace\trace.js:79:20)
at async TraceEntryPointsPlugin.createTraceAssets (E:\Project Romulus\3D_portfolio\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:89:9)
caused by plugins in Compilation.hooks.processAssets
Error: File E:\Project Romulus\3D_portfolio\.next\static\media\eho.3e680d06.JPG does not exist.
at Job.emitDependency (E:\Project Romulus\3D_portfolio\node_modules\next\dist\compiled@vercel\nft\index.js:1:39473)
at async Promise.all (index 19)
at async Object.nodeFileTrace (E:\Project Romulus\3D_portfolio\node_modules\next\dist\compiled@vercel\nft\index.js:1:35430)
at async E:\Project Romulus\3D_portfolio\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:135:28
at async Span.traceAsyncFn (E:\Project Romulus\3D_portfolio\node_modules\next\dist\trace\trace.js:79:20)
at async TraceEntryPointsPlugin.createTraceAssets (E:\Project Romulus\3D_portfolio\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:89:9)

Build failed because of webpack errors
info - Creating an optimized production build .

解决步骤 #

• 定位图片引用位置：在项目代码中全局搜索eho.JPG（注意大小写），找到所有引用该图片的组件或页面，确认引用路径是否正确。编译后的带hash文件名由Next.js自动生成，问题根源是原始图片文件未被正确处理。
• 检查原始图片文件：确认项目中是否存在eho.JPG文件，存放路径是否符合Next.js规范：
  • 若放在public文件夹下，路径应为/eho.JPG；
  • 若放在src/assets等源码目录下，需通过import方式引入，而非直接写绝对路径。
    同时检查文件名大小写是否与代码中一致（Windows系统文件系统不区分大小写，但Next.js编译过程可能严格区分）。
• 清理构建缓存并重新构建：删除缓存文件后重新执行构建命令：
  Windows系统：

  rd /s /q .next node_modules
  npm install
  npm run build
  

  Unix/Linux/macOS系统：

  rm -rf .next node_modules
  npm install
  npm run build
  

• 规范图片引用方式：确保使用Next.js推荐的图片引用方式：
  • 对于public目录下的图片：

    <img src="/eho.JPG" alt="描述文本" />
    

    或使用Next.js的Image组件：

    import Image from 'next/image';
    <Image src="/eho.JPG" alt="描述文本" width={500} height={500} />
    

  • 对于源码目录下的图片：

    import ehoImage from '../assets/eho.JPG';
    <Image src={ehoImage} alt="描述文本" />
    

• 排查版本或插件问题：如果上述方法无效，尝试升级Next.js到最新稳定版：

  npm install next@latest
  

  同时检查项目中是否有自定义webpack配置或第三方插件干扰了图片资源的处理，暂时禁用这些配置/插件后重新构建测试。

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