Unable to Install and configure the MDX transformer plugin (and dependencies) in gatsby site

Question

• Goal: Trying to create a simple blog using Gatsby

• Outcomes:

  • Expected Outcome: Things should go as defined in the tutorial guide
  • Actual Outcome: Getting Dependency tree error in step(s) & Also a warning message like 34 vulnerabilities (11 moderate, 23 high) whenever installing something using npm in this project

• Approach: I am following the guide available here, & in Task install MDX transform plugin, getting the below error

Questions:

1. How do i resolve this particular dependency tree issue & Also in general how do i approach this kind(dependency tree issue) of errors in npm?
2. The warnings related to the vulnerable packages - How critical are those & How should it be handled ?

Command-used: npm install gatsby-plugin-mdx @mdx-js/mdx@v1 @mdx-js/react@v1
Output/Console Error:
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.1.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 <home-folder>/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     <home-folder>/.npm/_logs/2022-07-06T15_46_56_149Z-debug-0.log

Updates:

Update 1:

After trying one of the suggestion given by the fellow stack-overflow site member, a new error is thrown! So ignoring the dependency tree issue with skip legacy tree is not working, Hence any more suggestion from any gatsby users!?

gatsby develop

 ERROR #11901  COMPILATION

Failed to compile Gatsby files (Error):

Could not resolve module "@parcel/namer-default" from
"<home-folder>/codeSpace/siteByGatsby/sv3/my-gatsby-site/node\_modules/@gatsbyjs/parcel-namer-relative-to-cwd/lib/index.js".

not finished compile gatsby files - 0.778s

Cesarean

You need to run npm install @parcel/namer-default If it says it Could not resolve a package, its because it wasn't installed. – Laky

Here i misunderstood, it's some other type of issue, as needed, i would give it a try here as well. – Cesarean

Answer 1

Not that "you should" normally do what i am about to suggest, but you can run:

npm install gatsby-plugin-mdx @mdx-js/mdx@v1 @mdx-js/react@v1 --legacy-peer-deps

Basically what this will do is tell npm that you wish to install peer dependencies, the reason this happens is because you are using [email protected] in your project, but the packages you are trying to install are using a lower version of React. Thus, NPM is throwing you this error.

The reason why "you shouldn't" normally do this, is imagine theres a dependancy within a package that is flagged as vunerable, but you currently have a 'fixed' version of this installed. You would then be installing the peer dependency that could have a vulenarbility.

You can run the above code and be 'alright', its not a big deal that it is wanting to install lesser version of React.

But what you should also think about, is do you really need [email protected], or could you use a downgraded version because, how likely are you to use any of the features that might be in the latest version release.

This is also a reason why a lot of developers don't just go and install the newest version of React when they are building projects, because you have to rely on packages that are maintained by either solo developers, or by a community of lovely people who are willing to help maintain a package to bring it up to speed with Reacts latest releases.

These are pretty much the main three things you can do:

• You either install the legacy dependencies
• You knock React down a version peg that is inline with the version required in the dependency tree for the packages you are looking to use
• You find another package, or you take a look on their Github incase they have released a version, but not yet published this release to NPMjs yet

Hope this helps :)

Sidenote:

When migrating this project to a hosting provider, you will also need to tell them that you have packages that you have force installed with --legacy-peer-deps by either creating an environment variable for the site on the hosting providers platform, or with .npmrc file with the following:

legacy-peer-deps=true

Laky

Thanks @Oliver for the explanation - Now i understood the root cause & alternatives available for me. But still not marking the answer as 'Accepted' as expecting some more ways/suggestions form the people who use(used) gatsby to build site(s) as i mostly relay on that framework to create my first blog – Cesarean

I work using Gatsby everyday as my fulltime job, the above with what you have mentioned is nothing to do with Gatsby itself. It's an NPM dependancy tree issue when installing packages into your project due to indifferences of React versions. From a Gatsby Developer perspective (which I am), I would suggest not using React above 18, although having the syntaxless import of React is nice, theres an abundance of Gatsby source and gatsby plugins that haven't been updated to React 18 so you would face the above issue. – Laky

This is why I would suggest you knock down React to something like "react": "^17.0.1", and Gatsby to "gatsby": "^4.11.2", in your package.json. This way you will be able to use all the plugins freely. Seeing as this is your "first blog" this would be my recommendation as you won't benefit from any of the new features that are in the newest version of React. – Laky

Apologies for my misunderstanding of your expertise in gatsby. – Cesarean

Ans as suggested i would re-configure the mentioned package versions & give it a try – Cesarean