在Create React App TS项目中安装Material UI遇漏洞问题求助

1. 回退到初始稳定状态 #

• 删除项目根目录下的node_modules文件夹和package-lock.json文件
• 执行npm install还原刚创建完React TS项目时的依赖环境

2. 重新安装MUI依赖 #

• 先清理npm缓存：npm cache clean --force
• 安装MUI稳定版依赖：

  npm install @mui/material@latest @emotion/react@latest @emotion/styled@latest
  

3. 针对性处理漏洞 #

npm audit给出的漏洞分不同等级，先明确漏洞影响范围再处理：

• 执行npm audit查看漏洞详情，定位出具体出问题的依赖包
• 如果是间接依赖的漏洞，用npm-force-resolutions强制修复：
  1. 安装工具：npm install -D npm-force-resolutions
  2. 在package.json中添加resolutions字段（以修复lodash漏洞为例）：

     "resolutions": {
       "lodash": "^4.17.21"
     }
     

  3. 在package.json的scripts中添加预安装钩子：

     "scripts": {
       "preinstall": "npx npm-force-resolutions"
     }
     

  4. 重新执行npm install

4. 切换依赖管理工具 #

npm的依赖树处理易出现冗余漏洞，可改用pnpm或yarn优化：

• 以pnpm为例：

  npm uninstall -g npm
  npm install -g pnpm
  pnpm install
  pnpm add @mui/material @emotion/react @emotion/styled
  

5. 忽略无影响的漏洞 #

• 执行npm audit --production仅查看生产依赖的漏洞
• 若漏洞属于开发依赖或不会触发的场景，执行npm audit fix --only=prod仅修复生产依赖问题

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