Getting an error when using npm to install a package-CodePudding

I'm trying to add a blog to my Gatsby website which involves adding MDX support. When I tried installing the MDX plugin by running the following command I get the following error:

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

Error

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: [email protected]
npm ERR! Found: [email protected]
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 [email protected]
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/[email protected]
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 [email protected]
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

Additional Info:

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"
  }
}

Node version 16.14.0

NPM version 8.6.0

OS Windows 10

Update

I tried to create a brand new Gatsby project and install the packages I need there. This way I could eliminate any chance of old/wrong versions of different packages. (This didn't work) I started having a similar issue with a lot other packages.

Solution (At least for me)

Switched to using Yarn.

CodePudding user response：

I have tried this command and it works fine for me.

npm config set legacy-peer-deps true

npm install  --force

CodePudding user response：

I have tried this Command npm install gatsby-plugin-mdx @mdx-js/mdx@v1 @mdx-js/react@v1 and it works fine with me

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"
  }
}

I think the problem will be in the folder path