我正在尝试为我的Gatsby网站添加一个博客，其中涉及添加MDX支持。当我尝试通过运行以下命令安装MDX插件时，我得到以下错误:
命令npm install gatsby-plugin-mdx @mdx-js/mdx@v1 @mdx-js/react@v1
误差
E:DevWebdantcho.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:UsersdantcAppDataLocalnpm-cacheeresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersdantcAppDataLocalnpm-cache_logs2022-06-18T01_43_31_526Z-debug-0.log
附加信息:
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"
}
}
<节点版本/strong>16.14.0
<NPM版本/strong>8.6.0
操作系统Windows 10
我尝试创建一个全新的Gatsby项目，并在那里安装我需要的软件包。这样我就可以消除不同软件包的旧版本/错误版本的任何可能性。(这不起作用)我开始在许多其他软件包中遇到类似的问题。
<解决方案/strong>(至少对我来说)
切换到使用Yarn.
我已经尝试了这个命令，它对我来说工作得很好。
npm config set legacy-peer-deps true
npm install --force
我在尝试安装gatsby-plugin-mdx时遇到了同样的错误。这似乎是React版本(18.2.0)之间的依赖冲突，你在你的项目和这些插件应该工作的React版本。
所以，解决方案很简单:通过编辑你的包来降级你的react版本。json文件。
而不是:
"dependencies": {
...
"react": "^18.2.0",
"react-dom": "^18.2.0",
...
},
更改为较早的版本，如16.14.0:
"dependencies": {
...
"react": "^16.14.0",
"react-dom": "^16.14.0",
...
},
然后保存文件。之后，在您的终端运行以下代码来删除当前安装在项目中的模块。
rm node_modules
最后，运行以下命令重新安装node_modules包:
npm install
现在，你可以再试一次并安装你的mdx插件:
npm install gatsby-plugin-mdx @mdx-js/mdx@v1 @mdx-js/react@v1
希望它对你有用!
我不确定是否降低你的反应可能会导致一些副作用问题，但这种方法对我有效。如果有人能澄清一下，我将不胜感激)我已经尝试了这个命令npm install gatsby-plugin-mdx @mdx-js/mdx@v1 @mdx-js/react@v1这对我来说很好
package.json
"name": "my-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@mdx-js/mdx": "^1.6.22",
"@mdx-js/react": "^1.6.22",
"gatsby-plugin-mdx": "^3.16.1"
}
}
让我们检查@mdx-js/react@1.6.22包的对等依赖项:
$ npm view @mdx-js/react@1.6.22 peerDependencies
{ react: '^16.13.1 || ^17.0.0' }
正如你所看到的，它使用react包作为它的对等依赖版本:^16.13.1或^17.0.0。但是在你的项目中，react包的版本是^18.2.0，这是不兼容的。当使用npm v7时，会显示这个警告。
两个安全的解决方案:
- 将react包降级到这两个兼容的版本。例如
$ npm i react@^17 react-dom@^17 -S
- 升级
@mdx-js/react包到最新版本(2.3.0到2023.7.3)，它支持新版本的React。让我们检查一下最新版本的对等依赖:
$ npm view @mdx-js/react@2.3.0 peerDependencies
{ react: '>=16' }
兼容版本>=16的react。显然，React 18.x是可以的。
$ npm i @mdx-js/react@^2.3.0 -S
gatsby-plugin-mdx@3.16.1包也有相同的版本兼容性问题。
由于我们已经将@mdx-js/react包升级到2.3.0，我们也需要将gatsby-plugin-mdx包升级到兼容的版本。让我们查找兼容的版本:
$ npm view gatsby-plugin-mdx@3.20.0 peerDependencies
{
'@mdx-js/mdx': '^1.0.0',
'@mdx-js/react': '^1.0.0',
gatsby: '^4.0.0-next',
react: '^16.9.0 || ^17.0.0 || ^18.0.0',
'react-dom': '^16.9.0 || ^17.0.0 || ^18.0.0'
}
gatsby-plugin-mdx@3.20.0要求@mdx-js/react包的版本是^1.0.0，这是不兼容的。让我们找到gatsby-plugin-mdxv4的对等依赖:
$ npm view gatsby-plugin-mdx@4.4.0 peerDependencies
{
'@mdx-js/react': '^2.0.0',
gatsby: '^4.0.0-next',
'gatsby-source-filesystem': '^4.0.0-next',
react: '^16.9.0 || ^17.0.0 || ^18.0.0 || ^0.0.0',
}
gatsby-plugin-mdx@4.4.0包与gatsby@^4.0.0-next和@mdx-js/react@^2.0.0兼容，我们可以使用这个版本。最终的软件包版本:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"gatsby": "^4.16.0",
"@mdx-js/react": "^2.3.0",
"gatsby-plugin-mdx": "^4.4.0",
"gatsby-source-filesystem": "^4.0.0"
},
但是主版本升级可能会破坏代码，您必须将代码迁移到升级版本。
注意:请小心运行npm install <package>与--force，或--legacy-peer-deps选项，这将导致潜在的破坏。相反，我们应该修复依赖包之间的版本兼容性问题。
和npm关于legacy-peer-deps的官方文档
不建议使用
legacy-peer-deps，因为它不会强制元依赖可能依赖的peerDependencies契约。