peer dependency issue in npm install - reactjs

Question

I am working on a personal site which uses create-react-app and noticed that after installing MUI, every time i npm install, i get peer dependency errors. I think it might have to do with different library versions i have, but im not really sure what the issue is. I think seeing my package might help someone else understand where the problem lies.
Screenshots of my errors in terminal and my package are here! Please help! :)
enter image description here
enter image description here
i've tried uninstalling mui (which it wont let me do because of other peer dependencies?), changing versions of react, deleting node modules and package lock files, but i keep getting the same 'unable to resolve dependency tree'
9:16
--force seems to work temporarily but it seems like its not the actual solution because i still cant install libraries 'naturally'

Answer 1

This is sometimes what I use when dealing with peer dependency problems.
install the version of the peer dependency I need locally to the package.json.
install this npm package: npm-force-resolutions
devDependencies: {
"npm-force-resolutions": "0.0.3" //I'm sure there is a more modern update by now!
}
Provide an additional item - "resolutions" - in the package.json pointing to that peer dependency.
package.json
{
"resolutions": {
"minimist": "1.2.5"
},
"dependencies": {
"minimist": "1.2.5",
}
}
And then add a script which runs after every time you install something new .
"scripts": {
"preinstallAfter": "node ./node_modules/npm-force-resolutions/index.js",
}
Then re-install
(Note: npm ci is better because it does not try to install minor variations of package files. It takes only what is explicitly declared in your package-lock.json file. That way its consistent if sharing on a repo between different operating systems. )
npm ci
Hope it helps