从NEXT 9升级到NEXT 11时出现HookWebpackError错误如何解决

报错成因 #

该报错本质是 webpack 版本差异导致的兼容问题，Next 11 默认启用 webpack5，而项目中现存的配置、依赖还在使用 webpack4 专属的废弃 API，触发空属性调用。最常见的触发场景包括：

• next.config.js 中的自定义 webpack 配置适配不完整，使用了仅 webpack4 支持的插件、路径处理逻辑，依赖的 webpack 内置属性在 webpack5 中已被移除，调用 replace 方法时目标变量为 undefined
• 第三方依赖未适配 webpack5，尤其是旧版本的静态资源处理类插件（如next-images@1.7.0及更早版本、旧版next-fonts等），内部实现依赖 webpack4 专属的模块属性
• 自定义 loader、babel 配置的路径解析逻辑依赖 webpack4 的输出规则，webpack5 调整输出结构后对应变量返回空值

排查解决方法 #

• 优先升级所有 Next 生态相关依赖到适配 webpack5 的版本，其中静态资源处理类插件需重点更新：next-images 需升级到 1.8.1 及以上版本，next-sass 可以直接替换为 Next 11 内置的 sass 支持，无需额外引入插件
• 注释 next.config.js 中自定义的 webpack 插件逐一排查，定位到不兼容的配置项后调整为 webpack5 支持的写法
• 清理旧版本构建缓存后重新启动项目，执行命令：

  rm -rf .next node_modules/.cache
  npm i && npm run dev
  

• 如需快速验证是否为 webpack5 兼容问题，可在 next.config.js 中临时添加配置降级到 webpack4，确认报错消失即可锁定问题范围：

  module.exports = {
    webpack5: false
  }
  

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