NodeJS+NextJS13依赖升级后遇依赖警告及漏洞问题求助

一、解决react-sizeme/react-stack-grid的peer依赖警告 #

你看到的这两个包是间接依赖，由某个直接安装的包引入的。解决步骤：

1. 定位依赖来源
   执行命令找出是哪个直接依赖带进来的：

   npm ls react-stack-grid
   

2. 针对性修复
   根据来源选择方案：

   • 方案1：强制升级子依赖（推荐）
     npm 8+支持overrides字段，强制让react-stack-grid使用兼容React 18的react-sizeme版本（v3.x支持React 18）。在package.json中添加：

     "overrides": {
       "react-stack-grid": {
         "react-sizeme": "^3.0.2"
       }
     }
     

     然后重新执行npm install。

   • 方案2：替换废弃的直接依赖
     如果定位到某个直接依赖已经停止维护，直接替换为替代方案。比如若该依赖来自旧版第三方组件，更换为官方最新版本或同类替代库。

   • 方案3：临时忽略警告（不推荐）
     执行安装命令时跳过peer依赖检查：

     npm install --legacy-peer-deps
     

二、修复npm audit检测到的漏洞 #

1. 移除废弃的@zeit/next-css（核心修复） #

@zeit/next-css是Next.js旧版本的CSS插件，Next.js 9.3+已内置CSS支持，该包早已废弃，它带来了webpack、css-loader等一系列旧版本依赖的漏洞。

• 步骤：
  1. 从package.json的dependencies中删除@zeit/next-css。
  2. 修改next.config.js，移除所有与@zeit/next-css相关的配置。
  3. 执行npm install，Next.js会自动使用内置的CSS处理逻辑，旧的漏洞依赖会被清除。

2. 修复lodash漏洞 #

审计报告中lodash的漏洞来自旧版本依赖，可通过overrides强制升级到安全版本：
在package.json中添加：

"overrides": {
  "lodash": "^4.17.21"
}

重新执行npm install即可覆盖所有子依赖中的旧版lodash。

3. 剩余无修复方案的漏洞 #

移除@zeit/next-css后，loader-utils、postcss等相关的无修复方案漏洞会自动消失，因为这些都是旧版webpack生态依赖带来的，Next.js内置的CSS处理使用的是最新安全版本的依赖。

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