Gatsby 3.0 Dependency Error

[emt-mocha]

Hi There,

Im getting error while trying to install the typography package following the guideline set by GatsbyJS. The following error is as below:

` npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: dadgatsbyjswebsite@3.0.1 npm ERR! Found: react@17.0.2 npm ERR! node_modules/react npm ERR! react@"^17.0.2" from the root project npm ERR! peer react@"^16.9.0 || ^17.0.0" from gatsby-plugin-typography@3.1.0 npm ERR! node_modules/gatsby-plugin-typography npm ERR! gatsby-plugin-typography@"^3.1.0" 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! react-typography@"^0.16.19" from the root project npm ERR! peer react-typography@"^0.16.1 || ^1.0.0-alpha.0" from gatsby-plugin-typography@3.1.0 npm ERR! node_modules/gatsby-plugin-typography npm ERR! gatsby-plugin-typography@"^3.1.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 /Users/jay/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in: npm ERR! /Users/jay/.npm/_logs/2021-03-30T08_00_59_456Z-debug.log

`

Somehow I am using npm command --legacy-peer-deps to proceed with the installations. So far no errors on code but appreciate if you could come up with some dependency fix accordingly.

[linoxyn]

Same issue here. I believe it's a React version issue "react": "^17.0.1" not Gatsby. I have been using npm update --force As far as I can see nothing seems really broken with the typography though I may see an issue once I do a project build.

[white-hat-vaibhs]

Same Issue here, I saw the source code under the node_module

import gray from "gray-percentage"
import type { OptionsType } from "Types"
import { MOBILE_MEDIA_QUERY } from "typography-breakpoint-constants"
import verticalRhythm from "compass-vertical-rhythm"

'import type' declarations can only be used in TypeScript files