Getting an error when using npm to install a package

Question

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.

Tyler2P · Accepted Answer · 2022-06-21 16:02:15Z

7

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

npm config set legacy-peer-deps true

npm install  --force

edited Jun 21, 2022 at 16:02

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Jun 21, 2022 at 13:49

Nguyễn Hữu Phạm Tuân

713 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matheus Oliveira Damião · Accepted Answer · 2022-06-27 22:19:01Z

2

I had the same error when trying to install gatsby-plugin-mdx. It seems to be a dependency conflict between the React version (18.2.0) you have in your project and the react version these plugins are supposed to work with.

So, the solution is quite easy: just downgrade your react version by editing your package.json file.

Instead of this:

"dependencies": {
  ...
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  ...
},

change to some earlier version, like 16.14.0:

"dependencies": {
  ...
  "react": "^16.14.0",
  "react-dom": "^16.14.0",
  ...
},

Then, save the file. After that, in your terminal run the following code to delete the current modules installed in your project.

rm node_modules

Finally, just reinstall your node_modules package by running the command:

npm install

Now, you can try again and install your mdx plugin:

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

Hope it works you!

(I'm not so sure if downgrading your react might cause some side-effect problems, but this way worked for me. If anyone could clarify something about it, I'd appreciate)

answered Jun 27, 2022 at 22:19

Matheus Oliveira Damião

1611 silver badge10 bronze badges

2 Comments

Gordon Glas Over a year ago

This seems like the better answer. I like downgrading React more than forcing incorrect dependencies.

Matheus Oliveira Damião Over a year ago

I also tried this other option, to force dependencies, but later, when trying to build gatsby project, I got an error with dependency again. So, I guess forcing is not a good option.

Yassin Mo · Accepted Answer · 2022-06-18 08:29:46Z

0

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

answered Jun 18, 2022 at 8:29

Yassin Mo

6122 gold badges5 silver badges12 bronze badges

2 Comments

Dantcho Over a year ago

I think it's an issue between the dependencies. No idea what tho.

Dantcho Over a year ago

Just tried installing a different library and can confirm that the folder path is not the problem.

Lin Du · Accepted Answer · 2023-07-04 10:24:35Z

Let's check the peer dependencies of @mdx-js/[email protected] package:

$ npm view @mdx-js/[email protected] peerDependencies
{ react: '^16.13.1 || ^17.0.0' }

As you can see, it uses react package as its peer dependency with version: ^16.13.1 or ^17.0.0. But in your project, the react package's version is ^18.2.0, which is incompatible. The warning will display when using npm v7.

Two safe solutions:

Downgrade the react package to those two compatible versions. E.g.

$ npm i react@^17 react-dom@^17 -S

Upgrade the @mdx-js/react package to the latest version(2.3.0 until 2023.7.3) which supports the new version of React. Let's check the peer dependencies of the latest version:

$ npm view @mdx-js/[email protected] peerDependencies
{ react: '>=16' }

It is compatible with react with version >=16. Obviously, React 18.x is ok.

Install/upgrade it

$ npm i @mdx-js/react@^2.3.0 -S

The [email protected] package has the same version compatibility issue.

Since we have upgrade the @mdx-js/react package to 2.3.0, we also need to upgrade the gatsby-plugin-mdx package to a compatible version. let's find which version is compatible:

$ npm view [email protected] 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'
}

[email protected] demands the @mdx-js/react package's version is ^1.0.0, it's not compatible. Let's find the gatsby-plugin-mdx v4's peer dependencies:

$ npm view [email protected] 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',
}

[email protected] package is compatible with the gatsby@^4.0.0-next and @mdx-js/react@^2.0.0, we can use this version. The final package versions:

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

But major version upgrading may break the code, you have to migrate the code to the upgraded version.

Note: Please be careful to run the npm install <package> with --force, or --legacy-peer-deps option, it will cause potentially broken. Instead, we should fix the version compatibility issues between dependent packages.

And npm official documentation about legacy-peer-deps

Use of legacy-peer-deps is not recommended, as it will not enforce the peerDependencies contract that meta-dependencies may rely on.

Collectives™ on Stack Overflow

Getting an error when using npm to install a package

Additional Info:

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Additional Info:

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related