react-gh-like-diff@2.0.2 requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.

[Angelk90]

Hi @neighborhood999 ,

I'm strangely unable to get the module working after updating react to the latest version.

I am given the following warm:
react-gh-like-diff@2.0.2 requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.

What happens is that using the component it tells me this: Files changed (0)

But it's impossible because the component looks like this:

<ReactGhLikeDiff
options={{
originalFileName: name,
updatedFileName: name,
}}
past={"Test"}
current={"Ok."}
/>

Package:

    "@date-io/moment": "^2.13.1",
    "@emotion/react": "^11.8.1",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.4.4",
    "@mui/material": "^5.4.4",
    "@mui/styles": "^5.4.4",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "docxtemplater": "^3.29.0",
    "file-saver": "2.0.5",
    "lodash": "4.17.21",
    "moment": "^2.29.1",
    "pizzip": "^3.1.1",
    "postcss": "^8.4.7",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-dark-mode-toggle": "0.2.0",
    "react-dom": "^17.0.2",
    "react-dropzone": "^12.0.4",
    "react-gh-like-diff": "^2.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-transition-group": "^4.4.2",
    "styled-components": "^5.3.3"

What am I doing wrong?

[neighborhood999]

Hi, are you trying to remove node_modules and re-install again?

[Angelk90]

@neighborhood999 : I've tried several times, it also happens on github when the build is done automatically.

would it be possible to release a new version with updated dev dep/dependencies and peerDependencies?

[Angelk90]

@neighborhood999 : Are there any news?

[neighborhood999]

Are you install react & react-dom at dependencies in your package.json?

[Angelk90]

@neighborhood999 :

"dependencies": {
    "@emotion/react": "^11.8.1",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.5.0",
    "@mui/lab": "^5.0.0-alpha.72",
    "@mui/material": "^5.5.0",
    "@mui/styles": "^5.5.0",
    "@testing-library/jest-dom": "5.16.2",
    "@testing-library/react": "12.1.3",
    "@testing-library/user-event": "13.5.0",
    "@xmldom/xmldom": "^0.8.1",
    "pizzip": "^3.1.1",
    "postcss": "^8.4.8",
    "react": "^17.0.2",
    "react-dark-mode-toggle": "0.2.0",
    "react-dom": "^17.0.2",
    "react-dropzone": "^12.0.4",
    "react-gh-like-diff": "^2.0.2",
    "react-router-dom": "^6.2.2",
    "react-scripts": "3.4.2",
    "react-transition-group": "^4.4.2",
    "styled-components": "^5.3.3"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run watch:css && react-scripts build && cp -R ./copy-build/. ./build && rm -rf docs && mv build docs",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/styles/tailwind.css -o src/styles/main.css",
    "watch:css": "postcss src/styles/tailwind.css -o src/styles/main.css",
    "move-static": "cp -a ./node_modules/@pdftron/webviewer/public/. public/webviewer/lib"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^3.1.0",
    "postcss-cli": "^7.1.1",
    "tailwindcss": "^1.6.2"
  }

[1846689910]

meet same issue, cannot work with react^17. Though the past and current files contain diff, the view shows Files changed (0)

[zhengyhn]

+1 . I found it works in the "example" folder. But when I use it in my own project, it shows Files changed (0). Then I move the yarn.lock file to my project, it works. Looks something wrong about dependency.

[1846689910]

@neighborhood999 I tried to use react^17 and react-scripts^5 to work on the example/compare-markdown. I found it could be the difflib library cannot generate satisfied unified diff string for diff2html, it will show Files changed(0). If use jsdiff, Diff.createTwoFilesPatch(oldFileName, newFileName, oldStr, newStr, oldHeader, newHeader) the generated diff string could work
I have forked your example here
reproduce step:

git clone git@github.com:1846689910/react-gh-like-diff.git
cd example/compare-markdown
npm i # I use node 16 and npm 8
npm start

then you can check this code snippet if use formatedStr generated from jsdiff will work, but use formatedStr1 generated from difflib not working. Maybe I made a wrong guess. I wonder if you could take a look and make this library compatible for react>=17. This is a really useful library

[MatinF]

I would also be interested in this upgrade