How to solve dependency error in gatsby js? - reactjs

Question

I was following Gatsbyjs tutorial. (https://www.gatsbyjs.com/docs/tutorial/part-four/) Link here.
I typed the command in window terminal,
gatsby new tutorial-part-four https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-four
npm install gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion #emotion/react
But error has occurred with these messages,
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: gatsby-starter-hello-world#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! peer react#"^16.9.0 || ^17.0.0" from gatsby-plugin-typography#3.0.0
npm ERR! node_modules/gatsby-plugin-typography
npm ERR! gatsby-plugin-typography#"*" from the root project
npm ERR! 2 more (gatsby, react-dom)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.0 || ^15.0.0 || ^16.0.0" from react-typography#0.16.19
npm ERR! node_modules/react-typography
npm ERR! peer react-typography#"^0.16.1 || ^1.0.0-alpha.0" from gatsby-plugin-typography#3.0.0
npm ERR! node_modules/gatsby-plugin-typography
npm ERR! gatsby-plugin-typography#"*" 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\pc\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\pc\AppData\Local\npm-cache\_logs\2021-03-13T09_43_09_116Z-debug.log
I want to know how to solve these error?

Answer 1

react-typography isn't ready for react 17, so you'll have to downgrade react into version 16 to use it.
Edit package.json and look for:
"dependencies": {
...
"react": "^17.0.1",
"react-dom": "^17.0.1",
...
},
change the version numbers to 16.14.0
"dependencies": {
...
"react": "^16.14.0",
"react-dom": "^16.14.0",
...
},
Save it and then remove all the files from node_modules/
rm -Rf node_modules
Finally, just reinstall everything using the command:
npm install
Continue with your command...
npm install gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion #emotion/react

Answer 2

I think the error is coming from npm versions
Try with adding --legacy-peer-deps option in npm install command
npm install gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion #emotion/react --legacy-peer-deps
or try after cleaning the npm by using below command
npm cache clean --force