How to solve error when install react-animated-3d-card - reactjs

When I want react-animated-3d-card, I get an error with Npm when I install it
How can i fix this errors?

The package react-animated-3d-card requires react version 16 as stated in the error log. The only way to use it in your project is to downgrade react to version 16. Your current react version is 18.

Related

Is it a problem if #types/react and react have different versions?

Typescript is added to the version 16 react application created with create react app.
I have installed the latest v.18 version of #types/react and #types/react-dom, but I would like to know if it is a problem that the version is different from react.
Thank you.
npx typesync will resolve type syncing issues. The script checks your package.json and searches the web for the #types version of your package, if one is not already installed. This may also remove the #types packages should you no longer need it.
You can go a step further and add this in your package.json:
“postinstall”: “npx typesync”
Now every time you install or update your packages you’ll automatically run the postinstall script!
Yes, as you'll have TS types for React 18, but JS code for React 16. For example, you may be able to import a new feature from React 18 but get a runtime error because you only have React 16.
You can solve this by using #types/react and #types/react-dom version 16 until you're ready to upgrade to React 18.

material bootstrap design is not working at React 18

enter image description hereI have tried to install mdb-ui-kit in react version 18. is there any alternative way to install it?
This package has react 17 as a peer dependency. Try to force the installation with
npm i mdb-react-ui-kit -- force
and test if it's still working. Otherwise you can downgrade your react version to 17.

why do I get an error in react-toastify module?

I'm using react-toastify to pop up an error message. Why do I get this error?
TypeError: Object(...) is not a function
useToastContainer
E:/Courses/programing/Code with Mosh/Front End/Mastering React/08 - Calling Backend Services (01h42m)/Section 8- Calling Backend Services/start/http-app/node_modules/react-toastify/dist/react-toastify.esm.js:866
Once I remove ToastContainer component everything works normally. What should I do to get rid of this error, and why do I get it?
I got the same problem here, I guess we are both using the newest version of react-toastify, but after I change the version with 4.1 (which the instructor is using) and it solved !
First, you need :
npm uninstall react-toastify --save
Then, reinstall it with the version 4.1
npm i react-toastify#4.1
Building on Pelic's answer, after uninstalling the latest version and reinstalling version 4.1, i had to restart my VSCode to get it to work!

React Native version mismatch error even when both are of same version

Using ignite boilerplate with expo for my react-native project. I am very new to this , hence facing so many issues. One such issue is React Native version mismatch.
Javascript Version : 0.54.2
Native Version : 0.52.0
I am sure i have updated the native version to 0.54.2 using this command : npm install react-native#0.54.2 . I checked in the package.json also to confirm the same. But when launching the I still see the same error.
Any help will be really helpful.
try react-native upgrade 0.54.2 --legacy true

Jest fails with error: Cannot find module 'react/lib/ReactComponentTreeHook'

I have installed Jest v17.0.3 in my react project.
When I run jest locally it works fine, but on the build server it fails with:
Error: Cannot find module 'react/lib/ReactComponentTreeHook' from 'ReactDebugTool.js'
Both machines are running node version 6.9.1 and npm version 4.0.2.
use same version of react and react-dom. My problem fixed after using this command
npm install --save react#15.4.0 react-dom#15.4.0
this problem specially occurs on react 15.4.0 above.
Can you check which version of React you are using? Is it the same on both servers? I would try removing node_modules and reinstalling the dependencies. The reason I am suggesting this is that in React v15.4.0 you cannot import private apis and it seems that ReactDebugTools.js is trying to import from react/lib/....
From the blogpost about React v15.4.0 (Link):
However, there is a possibility that you imported private APIs from react/lib/*, or that a package you rely on might use them. We would like to remind you that this was never supported, and that your apps should not rely on internal APIs. The React internals will keep changing as we work to make React better.
Hope this helps!
In the latest versions of react we often see this error as we have loaded 2 versions of react:
To make sure you have just 1 version, run the following in your terminal:
npm ls react-dom
npm ls react
Both the react and react-dom versions need to be same.
If any one of these returns more than 1 version then that's not supported. You have to then correct it in your corresponding package.json
I had the same issue and i removed the node_modules and ran npm install and it fixed the problem.

Resources