Login/Register
Unable to resolve dependency for installing html-parser
Asked Answered
reactjshtml-parsing
I

6

11

I am trying to install npm install react-html-parser in my current project. So I am trying to install the npm install react-html-parser but after I use the command.

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: [email protected]
    npm ERR! Found: [email protected]
    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 [email protected]
    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

Here is my package json file

{
  "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"
    ]
  }
}

I don't understand what I can do. Please help me find the solution. Any sort of help would be appreciated. Thank you in advance.

Itacolumite answered 19/2, 2022 at 13:20 Comment(0)
C
9

Here is a solution I found in the following answer

The idea is to replace react-html-parser with html-react-parser.

import parse from "html-react-parser";

...

{parse("<HTML string>")}

...
Cloison answered 3/4, 2022 at 22:54 Comment(0)
M
3

Instead of using react-html-parser, why don't you use html-react-parser ?

react-html-parser updated 5 years ago, I think something in the body doesn't "match" with current version of react. hmtl-react-parser is updated 7 days ago.

Mafaldamafeking answered 18/7, 2022 at 7:37 Comment(0)
R
2

The last release for react-html-parser seems to be from 4 years ago.

If you do not need anything specifically from React version 17, I would go with version 16 in your situation if you really want to use react-html-parser in your project. Looking at the peer dependencies of the react-html-parser package tells us that it is not ok with react 17.

  "peerDependencies": {
    "react": "^0.14.0 || ^15.0.0 || ^16.0.0-0"
  }

Here is a package.json file with the React and ReactDOM version changed accordingly. To keep it simple.

{
  "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"
    ]
  }
}

You could also use the --force flag when you run npm install if you really want React 17 and html-react-parser together with the recommended protections disabled.

npm install react-html-parser --force
Rogan answered 19/2, 2022 at 19:53 Comment(0)
M
1

react-html-parser is an older version and no longer supports newer react versions from react 17.0. Instead use html-react-parser

npm install html-react-parser --save

import parse from 'html-react-parser'

parse('<body><p>Lorem ipsum</p></body>')
Mcnair answered 25/6, 2023 at 3:51 Comment(0)
Y
0

I have faced the same problem with react version "react": "^18.1.0", I Have Solved the issue using npm install react-html-parser --legacy-peer-deps .

Yearround answered 12/6, 2022 at 4:42 Comment(1)
This isn't really a solution and I don't encourage people to do this. This basically just says, "Run legacy, outdated, code and doesn't provide a permanent fix to the problem. – Obbligato
G
0

For those who are still getting stuck with this issue:

instead of using that package we can rely on dangerouslySetInnerHTML

  <div className="" dangerouslySetInnerHTML={{__html:'<div className="text-red"><p>My HTML Content</p></div>'}}
Gelman answered 8/2 at 7:30 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.