React-html-parser在Vercel部署时依赖冲突问题求助

问题描述 #

我正尝试将Next.js应用部署到Vercel，但react-html-parser抛出了依赖冲突错误。我考虑过降级React版本，但其他依赖需要最新版的React，请问这种情况有什么解决方案？

错误日志 #

npm ERR! 代码 ERESOLVE
npm ERR! ERESOLVE 无法解析依赖
npm ERR! 
npm ERR! 解析时出错: react-html-parser@2.0.2
npm ERR! 已找到: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"18.2.0" 来自根项目
npm ERR!   peer react@">=16.8.0" 来自 @emotion/react@11.9.3
npm ERR!   node_modules/@emotion/react
npm ERR!     @emotion/react@"^11.9.3" 来自根项目
npm ERR!     peer @emotion/react@"^11.0.0-rc.0" 来自 @emotion/styled@11.9.3
npm ERR!     node_modules/@emotion/styled
npm ERR!       @emotion/styled@"^11.9.3" 来自根项目
npm ERR!       还有4个依赖(@mui/material, @mui/styled-engine, @mui/system, @mui/x-date-pickers)依赖它
npm ERR!     还有4个依赖(@mui/material, @mui/styled-engine, @mui/system, @mui/x-date-pickers)依赖它
npm ERR!   还有24个依赖(@emotion/styled, @mui/base, @mui/icons-material, ...)依赖react@18.2.0
npm ERR! 
npm ERR! 无法解析依赖:
npm ERR! react-html-parser@2.0.2 需要 peer react@"^0.14.0 || ^15.0.0 || ^16.0.0-0"
npm ERR! node_modules/react-html-parser
npm ERR!   react-html-parser@"^2.0.2" 来自根项目
npm ERR! 
npm ERR! 冲突的peer依赖: react@16.14.0
npm ERR! node_modules/react
npm ERR!   react-html-parser@2.0.2 需要 peer react@"^0.14.0 || ^15.0.0 || ^16.0.0-0"
npm ERR!   node_modules/react-html-parser
npm ERR!     react-html-parser@"^2.0.2" 来自根项目
npm ERR! 
npm ERR! 修复上游依赖冲突，或使用 --force 或 --legacy-peer-deps 参数重试
npm ERR! 以接受一个可能不正确（且潜在有问题）的依赖解析结果。
npm ERR! 
npm ERR! 完整报告请查看 /vercel/.npm/eresolve-report.txt

解决方案 #

• 使用--legacy-peer-deps参数安装依赖
  npm从v7版本开始默认启用严格的peer依赖校验，而react-html-parser@2.0.2的peer依赖要求停留在React 16及以下版本。使用--legacy-peer-deps可以跳过严格校验，兼容React 18版本。
  在Vercel部署时，有两种设置方式：

  1. 修改项目根目录的package.json脚本：

     "scripts": {
       "install": "npm install --legacy-peer-deps",
       "build": "next build"
     }
     

  2. 在Vercel项目设置的「Build & Development Settings」中，将「Install Command」设置为npm install --legacy-peer-deps。

• 替换react-html-parser为维护活跃的替代库
  react-html-parser的最新版本停留在2021年，长期未更新。可以选择以下替代方案：

  • html-react-parser：支持React 18，API与react-html-parser高度相似，迁移成本低
  • dangerouslySetInnerHTML：如果仅需简单渲染HTML字符串，React内置的这个属性无需额外依赖，直接使用即可

• 临时使用--force参数（不推荐）
  该参数会强制安装依赖，可能引发潜在的兼容性问题。仅在测试环境验证无异常后，再考虑在部署时使用，设置方式与--legacy-peer-deps一致，将Install Command改为npm install --force。

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