Next.js构建触发DEP_WEBPACK_MODULE_UPDATE_HASH弃用警告，如何解决

问题描述 #

每次构建Next.js应用时，都会弹出以下弃用警告：

(node:10504) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API
(Use node --trace-deprecation ... to show where the warning was created)

按照提示执行cross-env NODE_OPTIONS='--trace-deprecation' next build后，得到详细调用栈：

(node:8508) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API
    at ChunkGraph.getChunkGraphForModule (****\node_modules\next\dist\compiled\webpack\bundle5.js:28:48741)
    at CssModule.updateHash (****\node_modules\next\dist\compiled\webpack\bundle5.js:28:343372)
    at CssModule.updateHash (****\node_modules\next\dist\compiled\mini-css-extract-plugin\index.js:1:7125)
    at Object.name [as getName] (****\node_modules\next\dist\build\webpack-config.js:786:45)
    at addModuleToChunksInfoMap (****\node_modules\next\dist\compiled\webpack\bundle5.js:28:1124815)
    at ****\node_modules\next\dist\compiled\webpack\bundle5.js:28:1127194
    at Hook.eval [as call] (eval at create (****\node_modules\next\dist\compiled\webpack\bundle5.js:13:28645), <anonymous>:31:16)
    at Hook.CALL_DELEGATE [as _call] (****\node_modules\next\dist\compiled\webpack\bundle5.js:13:25915)
    at Compilation.seal (****\node_modules\next\dist\compiled\webpack\bundle5.js:28:103411)
    at ****\node_modules\next\dist\compiled\webpack\bundle5.js:28:148889

应用运行和构建均正常，但需要明确警告来源及解决方法。

环境信息 #

next: 14.1.0
npm: 10.4.0
node: 18.17.0

当前配置（next.config.js） #

// next.config.js
const path = require('path');

const nextConfig = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
};

module.exports = nextConfig;

已尝试的解决方案 #

删除node_modules、package-lock.json和.next目录后重新安装依赖，问题未解决。

问题分析 #

从调用栈可以看出，警告源于Next.js内置的webpack和mini-css-extract-plugin依赖。Next.js 14.1.0打包的webpack版本中，Module.updateHash方法已被标记为弃用，要求改用新的ChunkGraph API，但Next.js内部的webpack配置逻辑（webpack-config.js中相关代码）仍在调用旧方法，从而触发了该警告。

解决建议 #

• 等待官方修复：这是框架内部的依赖适配问题，Next.js团队会在后续版本中更新webpack相关逻辑，替换弃用的API。可关注Next.js更新日志，升级到修复后的版本。
• 临时屏蔽警告：如果不想看到该警告，可在构建命令中添加屏蔽参数：

  cross-env NODE_OPTIONS='--no-deprecation' next build
  

  注意：此方法会屏蔽所有弃用警告，可能错过其他有用信息。
• 升级Next.js版本：检查是否已有更新版本修复该问题，比如升级到14.1.x后续小版本或14.2.x版本，新版本通常会修复这类依赖兼容问题。

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