Gatsby tutorial part 3 is broken — Could not resolve dependency: peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected]

[tomer]

On Chapter 3 of the tutorial, users are requested to install typography.js. Unfortunetly, some external dependencies are outdated, making it difficult to follow the instructions without downgrading dependencies.

Steps to reproduce
Follow the steps described at https://www.gatsbyjs.com/docs/tutorial/part-three/#-install-and-configure-gatsby-plugin-typography:

➜  gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world
➜  tutorial cd tutorial-part-three
➜  npm install gatsby-plugin-typography react-typography typography typography-theme-fairy-gates

Current result

➜  gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world
[...]
➜  tutorial cd tutorial-part-three
➜  npm install gatsby-plugin-typography react-typography typography typography-theme-fairy-gates


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!   react-typography@"*" from the root project
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 ~/.npm/eresolve-report.txt for a full report.

[LekoArts]

Hi! Unfortunately this is an issue with npm 7 -- until the tutorial is rewritten to include notes for this version, you'll want to use the --legacy-peer-deps flag (as the error suggests) when you run into such problems.