We Keep Coding

Installing Angular 13 Server side rendering gives dependency error

I am using Angular ~13.3.0 and #angular/material: ^13.3.9
I wanted to install the Server side rendering, So I ran the command
ng add #nguniversal/express-engine
getting this error.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: ava-grid#0.0.0
npm ERR! Found: #angular/animations#13.3.11
npm ERR! node_modules/#angular/animations
npm ERR! peer #angular/animations#"^13.0.0 || ^14.0.0-0" from #angular/material#13.3.9
npm ERR! node_modules/#angular/material
npm ERR! #angular/material#"^13.3.9" from the root project
npm ERR! peerOptional #angular/animations#"13.3.11" from #angular/platform-browser#13.3.11
npm ERR! node_modules/#angular/platform-browser
npm ERR! peer #angular/platform-browser#"13.3.11" from #angular/forms#13.3.11
npm ERR! node_modules/#angular/forms
npm ERR! peer #angular/forms#"^13.0.0 || ^14.0.0-0" from #angular/material#13.3.9
npm ERR! node_modules/#angular/material
npm ERR! #angular/material#"^13.3.9" from the root project
npm ERR! 2 more (#ctrl/ngx-codemirror, the root project)
npm ERR! peer #angular/platform-browser#"^13.0.0 || ^14.0.0-0" from #angular/material#13.3.9
npm ERR! node_modules/#angular/material
npm ERR! #angular/material#"^13.3.9" from the root project
npm ERR! 3 more (#angular/platform-browser-dynamic, #angular/router, the root project)
npm ERR! 1 more (the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! #nguniversal/express-engine#"13.1.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: #angular/animations#13.3.12
npm ERR! node_modules/#angular/animations
npm ERR! peer #angular/animations#"13.3.12" from #angular/platform-server#13.3.12
npm ERR! node_modules/#angular/platform-server
npm ERR! peer #angular/platform-server#"^13.3.4" from #nguniversal/express-engine#13.1.1
npm ERR! node_modules/#nguniversal/express-engine
npm ERR! #nguniversal/express-engine#"13.1.1" 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.
I have no idea what is going on here as I am using material

How i can resolve module version peer depandancy in reactjs project,

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: home-ui#2.4.1
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR! peer react#"^17.0.0 || ^18.0.0" from #mui/icons-material#5.8.4
npm ERR! node_modules/#mui/icons-material
npm ERR! #mui/icons-material#"^5.8.4" from the root project
npm ERR! 3 more (#mui/material, #emotion/react, #emotion/styled)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.14.0" from react-dom#16.14.0
npm ERR! node_modules/react-dom
npm ERR! react-dom#"^16.13.1" 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 /root/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-07-20T13_48_30_532Z-debug.log

heroku build failed on deployment

I am trying to host my React application on heroku but I keep getting the following errors:
-----> Installing dependencies
Installing node modules
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-credit-card-input#1.1.5
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR! peer react#">=16.8.0" from #emotion/react#11.7.1
npm ERR! node_modules/#emotion/react
npm ERR! #emotion/react#"^11.7.1" from the root project
npm ERR! peer #emotion/react#"^11.0.0-rc.0" from #emotion/styled#11.6.0
npm ERR! node_modules/#emotion/styled
npm ERR! #emotion/styled#"^11.6.0" from the root project
npm ERR! 3 more (#mui/material, #mui/styled-engine, #mui/system)
npm ERR! 3 more (#mui/material, #mui/styled-engine, #mui/system)
npm ERR! 31 more (#emotion/styled, #mui/base, #mui/icons-material, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" from react-credit-card-input#1.1.5
npm ERR! node_modules/react-credit-card-input
npm ERR! react-credit-card-input#"^1.1.5" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#16.14.0
npm ERR! node_modules/react
npm ERR! peer react#"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" from react-credit-card-input#1.1.5
npm ERR! node_modules/react-credit-card-input
npm ERR! react-credit-card-input#"^1.1.5" 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 /tmp/npmcache.GoZcZ/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.GoZcZ/_logs/2022-06-27T11_25_24_489Z-debug-0.log
I have tried to do both --legacy-peer-deps and npm install --force but my build keeps getting failed. Is there a way to fix this recurrent problem.

I had to update the peer dependency for credit-card-input library in the package-lock.json file to be compatible with my version of react and this solves my problem. I'm not sure if this is the best way but it solves the issue for me.

When I try to install material ui icon dependency face this error

npm i #material-ui/icons
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: my-app#0.1.0
npm ERR! Found: react#18.1.0
npm ERR! node_modules/react
npm ERR! peer react#"^18.0.0" from #testing-library/react#13.1.1
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^13.1.1" from the root project
npm ERR! peer react#"^18.1.0" from react-dom#18.1.0
npm ERR! node_modules/react-dom
npm ERR! peer react-dom#"^18.0.0" from #testing-library/react#13.1.1
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^13.1.1" from the root project
npm ERR! 1 more (react-scripts)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! #material-ui/icons#"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#17.0.2
npm ERR! node_modules/react
npm ERR! peer react#"^16.8.0 || ^17.0.0" from #material-ui/icons#4.11.3
npm ERR! node_modules/#material-ui/icons
npm ERR! #material-ui/icons#"*" 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\Vikash\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\Vikash\AppData\Local\npm-cache\_logs\2022-05-03T21_09_36_618Z-debug-0.log
PS C:\Users\Vikash\Desktop\personal portfolio\my-app>

Use the below command to install MUI v5 with React 18.1.0
npm install #mui/material #emotion/react #emotion/styled
Follow MUI Documentation

I tried the below
npm i #material-ui/icons --legacy-peer-deps
Then it happens new errors, I tried to upgrade "#material-ui/core": "^4.12.4" and it works.

Unable to install react-navigation-header-buttons

I had installed an old version before,but i want to upgrade to version 8, but I dont know how to face these errors
these are the current errors i am facinh
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: fyp#1.0.0
npm ERR! Found: #react-navigation/native#3.5.0
npm ERR! node_modules/#react-navigation/native
npm ERR! #react-navigation/native#"~3.5.0" from react-navigation#3.11.1
npm ERR! node_modules/react-navigation
npm ERR! react-navigation#"^3.11.1" from the root project
npm ERR! peer #react-navigation/native#"^3.1.1" from react-navigation-drawer#1.2.1
npm ERR! node_modules/react-navigation-drawer
npm ERR! react-navigation-drawer#"~1.2.1" from react-navigation#3.11.1
npm ERR! node_modules/react-navigation
npm ERR! react-navigation#"^3.11.1" from the root project
npm ERR! 1 more (react-navigation-stack)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! react-navigation-header-buttons#"8.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: #react-navigation/native#6.0.10
npm ERR! node_modules/#react-navigation/native
npm ERR! peer #react-navigation/native#">=5" from react-navigation-header-buttons#8.0.0
npm ERR! node_modules/react-navigation-header-buttons
npm ERR! react-navigation-header-buttons#"8.0.0" 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!

UPDATE (got the solution):
install a lower version of react-navigation-header-button. version 6 worked for me.

In your package, you have #react-navigation/native version 3.5.0.
Try to upgrade #react-navigation/native version to >=5 using
npm i #react-navigation/native#latest or npm i #react-navigation/native#version_you_want(>=5)
Then you can use react-navigation-header-buttons to version 8.0.0
Or as an alternative
You can use npm i --legacy-peer-deps if you can not have to upgrade #react-navigation/native package