Unable to resolve dependency for installing html-parser

Question

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.

Shahan M · Accepted Answer · 2022-04-03 22:54:54Z

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>")}

...

answered Apr 3, 2022 at 22:54

Shahan M

5431 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pierre Haumahu · Accepted Answer · 2022-07-18 07:38:11Z

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.

edited Jul 18, 2022 at 7:38

answered Jul 18, 2022 at 7:37

Pierre Haumahu

313 bronze badges

Comments

Simon Leroux · Accepted Answer · 2022-02-19 19:53:16Z

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

Rushen Samodya · Accepted Answer · 2023-06-25 03:51:53Z

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>')

answered Jun 25, 2023 at 3:51

Rushen Samodya

112 bronze badges

Comments

Abu Raihan Mohammad Moin · Accepted Answer · 2022-06-12 04:51:02Z

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 .

edited Jun 12, 2022 at 4:51

answered Jun 12, 2022 at 4:42

Abu Raihan Mohammad Moin

11 bronze badge

1 Comment

Grant Curell Over a year ago

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.

Aashiq Otp · Accepted Answer · 2024-02-08 07:30:34Z

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>'}}

answered Feb 8, 2024 at 7:30

Aashiq Otp

851 silver badge12 bronze badges

Collectives™ on Stack Overflow

Unable to resolve dependency for installing html-parser

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related