How to solve dependency error in gatsby js?

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: [email protected]
npm ERR! Found: [email protected]
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 [email protected]
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 [email protected]
npm ERR! node_modules/react-typography
npm ERR!   peer react-typography@"^0.16.1 || ^1.0.0-alpha.0" from [email protected]
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