Next.js上传自定义歌单封面后报Cannot find module错误如何解决

你的推测符合部分原因，还有两个核心的底层问题需要注意：

• require 是 Node.js/Next.js 构建阶段的静态解析指令，不是运行时动态加载方法，你用模板字符串拼接路径的写法，只有构建时已经存在的文件能被识别；用户刚上传的新文件是运行时才生成的，构建阶段没有收录，自然会报找不到模块的错误。之前使用默认图逻辑正常，就是因为默认图是构建前就已经放在目录内的资源，能被静态解析到。
• 上传时序问题确实存在：multer 和 sharp 的处理是异步流程，如果你前端提交请求后，还没等后端返回上传完成的成功响应就直接修改本地 state 更新歌单列表，就会出现还没上传完就去加载图片的情况。
• 白屏是因为 require 找不到模块时会抛出未捕获的 JS 运行时异常，直接打断组件渲染流程，而用静态 url 加载图片就算失败也只是资源加载错误，不会触发 JS 层面的异常，不会导致组件崩溃。

1. 替换 require 的动态加载写法 #

不要用 require 加载运行时生成的静态资源，改成直接用静态资源路由访问：

你可以把 /server/avatars/playlists 目录配置为静态资源目录（放在项目根目录的 public 文件夹下，或者配置 nginx/服务器静态路由指向该存储目录），之后直接写 src={/avatars/playlists/${avatar}} 即可，不需要加 require，next/image 会直接发起 http 请求加载图片，不存在静态解析找不到模块的问题。

2. 调整提交更新时序，确保上传完成再更新视图 #

• 前端提交创建歌单的请求后，不要乐观更新本地 state，必须等待后端接口完全处理完数据存储、图片处理、文件落盘所有逻辑，返回成功响应以及新生成的歌单完整信息（包括正确的图片文件名）之后，再把新的歌单项 push 到本地的 state 数组里，此时更新视图才不会去加载还不存在的资源。
• 如果想要做乐观更新提升体验，可以给新的歌单项先指定默认图片作为占位，等接口返回成功后再替换成用户上传的图片路径，同时给 next/image 加上 onError 回调，加载失败时自动 fallback 到默认图，避免异常：

<Image
  src={playlist.avatar || '/default-playlist.png'}
  alt={playlist.name}
  fill
  onError={(e) => {
    e.currentTarget.src = '/default-playlist.png'
  }}
/>

3. 额外优化 #

如果你的图片是存在服务器本地磁盘，不要把上传目录放在 Next.js 的源码目录下，避免新文件触发开发环境的热重载导致页面白屏，生产环境也不会因为新文件影响构建产物。

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