npm安装gatsby-plugin-mdx出现ERESOLVE依赖冲突的解决方法

问题场景 #

为Gatsby网站添加博客功能、配置MDX支持的过程中，执行依赖安装命令时出现报错。

执行的安装命令 #

npm install gatsby-plugin-mdx @mdx-js/mdx@v1 @mdx-js/react@v1

报错信息 #

E:\Dev\Web\dantcho.com>npm install gatsby-plugin-mdx @mdx-js/mdx@v1 @mdx-js/react@v1
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: dantcho@1.0.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!   peer react@"^16.9.0 || ^17.0.0 || ^18.0.0" from gatsby-plugin-mdx@3.16.1
npm ERR!   node_modules/gatsby-plugin-mdx
npm ERR!     gatsby-plugin-mdx@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22
npm ERR! node_modules/@mdx-js/react
npm ERR!   @mdx-js/react@"v1" from the root project
npm ERR!   peer @mdx-js/react@"^1.0.0" from gatsby-plugin-mdx@3.16.1
npm ERR!   node_modules/gatsby-plugin-mdx
npm ERR!     gatsby-plugin-mdx@"*" 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\dantc\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\dantc\AppData\Local\npm-cache\_logs\2022-06-18T01_43_31_526Z-debug-0.log

补充环境与配置信息 #

• Node版本：16.14.0
• npm版本：8.6.0
• 操作系统：Windows 10
• 项目package.json配置：

{
  "name": "dantcho",
  "version": "1.0.0",
  "private": true,
  "description": "Dantcho",
  "author": "Yordan Hristov (Dantcho)",
  "keywords": [
    "gatsby"
  ],
  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  },
  "dependencies": {
    "@fontsource/rubik": "^4.5.10",
    "babel-plugin-styled-components": "^2.0.7",
    "framer-motion": "^6.3.11",
    "gatsby": "^4.16.0",
    "gatsby-plugin-image": "^2.16.1",
    "gatsby-plugin-manifest": "^4.16.0",
    "gatsby-plugin-react-helmet": "^5.16.0",
    "gatsby-plugin-sharp": "^4.16.1",
    "gatsby-plugin-styled-components": "^5.16.0",
    "gatsby-remark-images": "^6.16.0",
    "gatsby-source-filesystem": "^4.16.0",
    "gatsby-transformer-remark": "^5.16.0",
    "gatsby-transformer-sharp": "^4.16.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0",
    "styled-components": "^5.3.5"
  }
}

已尝试排查操作 #

• 创建全新Gatsby项目后再安装所需依赖，排除包版本错误、旧缓存干扰问题，操作后问题仍存在
• 安装其他多个依赖包时也出现了同类依赖解析错误

实测有效解决方案 #

切换使用Yarn作为包管理器完成依赖安装。

内容的提问来源于stack exchange，提问作者Dantcho