Does new version of Gatsby not work with Material UI? - javascript

I am running into this error
portfolio % npm install gatsby-theme-material-ui
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: project#1.0.0
npm ERR! Found: gatsby#5.3.3
npm ERR! node_modules/gatsby
npm ERR! gatsby#"^5.3.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby#"^3.0.0 || ^4.0.0" from gatsby-theme-material-ui#5.3.0
npm ERR! node_modules/gatsby-theme-material-ui
npm ERR! gatsby-theme-material-ui#"*" from the root project
npm ERR!
Within my gatsby config I have the plugin but am noticing some weird styling for production. I assumed it was because it is missing something like gatsby-theme-material-ui for it to work.
Any ideas?

gatsby-theme-material-ui is not an official plugin so it's only maintained and supported by his author and contributors so its actual state is quite deprecated. This means that you are relying on Gatsby's package version which is expecting a version 3 or 4 (gatsby#"^3.0.0 || ^4.0.0") while you have the 5.3.3.
If looking for other alternative plugins is not an option, you can bypass the dependency tree issue by running:
npm install gatsby-theme-material-ui --legacy-peer-deps
The --legacy-peer-deps will resolve the (old) legacy dependencies for the package.

Related

VUE install - unable to resolve dependency tree

I pull my project from other computer, it works fine there, but when i npm install on this machine it got this error. can i have some clue about how to fix this and what I need to do to avoid this kind of problem in the future.
npm ERR! Found: vue#3.2.45
npm ERR! node_modules/vue
npm ERR! vue#"^3.2.45" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue#"^2.5.17" from element-ui#2.15.12
npm ERR! node_modules/element-ui
npm ERR! element-ui#"^2.4.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.
I've tried installing vue, update npm to v18, all requirement are supposed to be fulfilled
You are installing ElementUI version 2.15.12 - which supports only Vue version 2 but your Vue is version 3.
Either install ElementPlus or downgrage Vue 3 to Vue 2.

Why is Mock Service Worker not installed in React project with Typescript support?

I want to include Mock Service Worker into my React project with Typescript support, but as soon as I run npm install msw --save-dev command, my terminal shows me these error messages:
PS F:\Programming\React Practices\ReactPizza\my-app> npm install msw --save-dev
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: msw#0.41.0
npm ERR! Found: typescript#4.7.2
npm ERR! node_modules/typescript
npm ERR! peer typescript#">= 2.7" from fork-ts-checker-webpack-plugin#6.5.2
npm ERR! node_modules/fork-ts-checker-webpack-plugin
npm ERR! fork-ts-checker-webpack-plugin#"^6.5.0" from react-dev-utils#12.0.1
npm ERR! node_modules/react-dev-utils
npm ERR! react-dev-utils#"^12.0.1" from react-scripts#5.0.1
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"5.0.1" from the root project
npm ERR! peerOptional typescript#"^3.2.1 || ^4" from react-scripts#5.0.1
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"5.0.1" from the root project
npm ERR! 2 more (tsutils, the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript#">= 4.2.x <= 4.6.x" from msw#0.41.0
npm ERR! node_modules/msw
npm ERR! dev msw#"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: typescript#4.6.4
npm ERR! node_modules/typescript
npm ERR! peerOptional typescript#">= 4.2.x <= 4.6.x" from msw#0.41.0
npm ERR! node_modules/msw
npm ERR! dev msw#"*" 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\Win10\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\Win10\AppData\Local\npm-cache\_logs\2022-05-27T17_17_28_323Z-debug.log
I don't know what the matter is, and how to fix it.
My mini-project is powered by create-react-app. I mean the project was started out with this:
npx create-react-app my-app --template typescript
When I don't utilize Typescript with npx create-react-app everything is going well.
You may easily check those error messages on GitHub:https://github.com/AlexKor-5/ReactPizzaApp_Ts/tree/5849bb4cb928550dcb4bfd66ecb8b7bf0757fb9f by an attempt to install MSW.
I can only assume you're using npm 7 (since npm 6 would automatically force install it). And it's telling you what the issue is, a conflicting peer dependency, typescript.
It's also telling you how to fix it:
Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
Aka:
npm install --legacy-peer-deps
Otherwise reinstall a later/earlier version of either package so the peer dependencies can match up. Msw is using ">= 4.2.x <= 4.6.x" typescript and you have typescript#4.7.2 installed, it's breaking because msw doesn't accept your typescript version.

How to install react-paystack in Visual Studio

I am trying to install react-paystack and I am getting this error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: myfapp#0.1.0
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^15.0.0 || ^16.0.0" from react-paystack#3.0.4
npm ERR! node_modules/react-paystack
npm ERR! react-paystack#"*" 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\Jeffrey Matthew\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\Jeffrey Matthew\AppData\Local\npm-cache\_logs\2021-08-12T05_04_04_535Z-debug.log
Any solutions, please?
I think the reason is clear. Installed react version is 17.0.2 where as react-paystack 3.0.4 requires older version (16.x).
As current react-paystack only works on react 16.x, I think the only way is to create react project with 16.x version and try again.
You might have another node_modules folder or package.json file in a parent folder.

How can I download and Use Angular project off of Stackblitz?

So I have a project available on stackblitz that I want to use offline for my own purposes. for reference, here is the link to what I want to use- https://stackblitz.com/edit/nvs-angular-search-dropdown-istnzp. So, I tried to download the code and planned to run it using npm install and ng serve. but I am getting lots of errors on running npm install saying like this:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: angular#0.0.0
npm ERR! Found: #angular/compiler#12.0.3
npm ERR! node_modules/#angular/compiler
npm ERR! #angular/compiler#"^12.0.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #angular/compiler#"7.0.4" from #angular/compiler-cli#7.0.4
npm ERR! node_modules/#angular/compiler-cli
npm ERR! dev #angular/compiler-cli#"~7.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!
npm ERR! See C:\Users\cnaag\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\cnaag\AppData\Local\npm-cache\_logs\2021-06-06T10_39_43_617Z-debug.log
Any help in this regard would be amazing!
Instead of NPM, install Yarn on your machine and run yarn install

issue installing npm package, react-circular-progressbar

When I install react-circular-progressbar into my react projects it show an error why?
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: nadeems-portfolio#0.1.0
npm ERR! Found: react#17.0.1
npm ERR! node_modules/react
npm ERR! react#"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.0 || ^15.0.0 || ^16.0.0" from react-circular-progressbar#2.0.3
npm ERR! node_modules/react-circular-progressbar
npm ERR! react-circular-progressbar#"*" 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 /home/nadeem/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/nadeem/.npm/_logs/2020-12-05T09_58_59_238Z-deb
This is because one of the depencies can not be resolved combined with your current dependencies.
The following part indicates that ciruclar-progressbar (version 2.0.3) requires react 15 or 16 as a peer dependency, and you are using a newer version in your dependency list.
Could not resolve dependency: peer react#"^0.14.0 || ^15.0.0 || ^16.0.0" from react-circular-progressbar#2.0.3
There are a few solutions;
Downgrade the package that doesn't fit in the constraints of the package that you want to install
Look for a version of the package that you are trying to install that has updated their peer dependencies to include react 17
use npm install <package-name> --force to ignore it (really not recommended, unless you have manually verified there are no incompatibilities)
use npm install <package-name> --legacy-peer-deps.
The first two options are deduced from the error you have given. Whereas the last two options are provided in the error itself.

Categories