0

I am new to react and I am even newer to typescript. I am working on this project right now and I need to use this specific git repository which is a typescript project. I want to add react-reveal so I can have some cool animations on my website but I get this error message. enter image description here

I am not sure why this specific library is not working because I have installed other librarys like reactstrap. If anyone could give me any information on how to get this to work or why this isn't working it would be much appreciated!

kyle lynch
  • 40
  • 1
  • 4
  • 1
    You have dependency issue (incorrect and potentially broken dependency) as it says, so try to run the command with --force or --legacy-peer-deps.. Then show the output result of --force and --legacy-peer-deps commands – Homezonic Nov 02 '21 at 23:20
  • Thank you I will try this when I get home! – kyle lynch Nov 02 '21 at 23:21
  • 1
    This is because the module you are trying to install uses react with these versions"^15.3.0 || ^16.0.0" as peer dependencies and you are using react 17.0.2, so the module you are installing doesnt find the correct react version, you can accept the installation with the force flag, but this can potentially break the app – Woohaik Nov 02 '21 at 23:22
  • So can I change my react version? I am assuming that could potentially cause issues elsewhere. But would it fix the problem with react-reveal? – kyle lynch Nov 02 '21 at 23:28

2 Answers2

2

React-reveal doesn't seem to be actively maintained as it was last updated on August 2018.

Based on the error you received it looks that there is a library that is explicitly configured to only work with React v15 or v16. You could use a slightly older version of React that works with react-reveal. You're using React 17.0.2. You could try using React v16.14.0.

You could also follow the instructions in the error message - using the force option. Here is a link(npm: When to use `--force` and `--legacy-peer-deps`) that describes how that works.

A better way to go is search for a more popular actively maintained alternative like react-spring(https://react-spring.io/) or react-awesome-reveal(https://www.npmjs.com/package/react-awesome-reveal).

javalion
  • 21
  • 4
0

I found the problem, you must put this command in the terminal => npm config set legacy-peer-deps true

Muhammad El Masnaoui
  • 1