无法解决安装 html-parser 的依赖关系

Ghu*_*der 9 html-parsing reactjs

我正在尝试在当前项目中安装 npm install react-html-parser 。所以我尝试安装 npm install react-html-parser 但在使用该命令之后。

npm ERR! code ERESOLVE
    npm ERR! ERESOLVE unable to resolve dependency tree
    PS D:\Ecommerce\user\ecom> npm install react-html-parser
    npm ERR! code ERESOLVE
    npm ERR! ERESOLVE unable to resolve dependency tree
    npm ERR!
    npm ERR! While resolving: ecom@0.1.0
    npm ERR! Found: react@17.0.2
    npm ERR! node_modules/react
    npm ERR!   react@"^17.0.2" from the root project   
    npm ERR!
    npm ERR! Could not resolve dependency:
    npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0-0" from react-html-parser@2.0.2
    npm ERR! node_modules/react-html-parser
    npm ERR!   react-html-parser@"*" from the root project
    npm ERR!
    npm ERR! Fix the upstream dependency conflict, or retry
    npm ERR! this command with --force, or --legacy-peer-deps
    npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
    npm ERR!
    npm ERR! See C:\Users\hp\AppData\Local\npm-cache\eresolve-report.txt for a full report.    
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\hp\AppData\Local\npm-cache\_logs\2022-02-19T13_09_05_987Z-debug-0.log
Run Code Online (Sandbox Code Playgroud)

这是我的包 json 文件

{
  "name": "ecom",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.26.0",
    "bootstrap": "^5.1.3",
    "is-buffer": "^2.0.5",
    "react": "^17.0.2",
    "react-bootstrap": "^2.1.1",
    "react-dom": "^17.0.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-router-transition": "^2.1.0",
    "react-scripts": "5.0.0",
    "react-slick": "^0.28.1",
    "react-toastify": "^8.2.0",
    "slick-carousel": "^1.8.1",
    "web-vitals": "^2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
Run Code Online (Sandbox Code Playgroud)

我不明白我能做什么。请帮我找到解决方案。任何形式的帮助将不胜感激。先感谢您。

小智 8

这是我在以下答案中找到的解决方案

这个想法是替换react-html-parserhtml-react-parser.

import parse from "html-react-parser";

...

{parse("<HTML string>")}

...
Run Code Online (Sandbox Code Playgroud)


小智 2

React-html-parser 的最后一个版本似乎是 4 年前的版本。

如果您不需要 React 版本 17 中的任何内容,如果您确实想在项目中使用 React-html-parser,我会根据您的情况选择版本 16。查看react-html-parser包的对等依赖关系告诉我们,它不适用于react 17。

  "peerDependencies": {
    "react": "^0.14.0 || ^15.0.0 || ^16.0.0-0"
  }
Run Code Online (Sandbox Code Playgroud)

这是一个 package.json 文件,其中 React 和 ReactDOM 版本已相应更改。为了保持简单。

{
  "name": "ecom",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.26.0",
    "bootstrap": "^5.1.3",
    "is-buffer": "^2.0.5",
    "react": "^16.8.0",
    "react-bootstrap": "^2.1.1",
    "react-dom": "^16.14.0",
    "react-html-parser": "^2.0.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-router-transition": "^2.1.0",
    "react-scripts": "5.0.0",
    "react-slick": "^0.28.1",
    "react-toastify": "^8.2.0",
    "slick-carousel": "^1.8.1",
    "web-vitals": "^2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
Run Code Online (Sandbox Code Playgroud)

如果您确实想要 React 17 和 html-react-parser 并禁用推荐的保护,那么您还可以在运行 npm install 时使用 --force 标志。

npm install react-html-parser --force
Run Code Online (Sandbox Code Playgroud)