无法在 gatsby 站点中安装和配置 MDX 转换器插件（和依赖项）

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: my-gatsby-site@1.0.0
npm ERR! Found: react@18.2.0
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 gatsby-plugin-mdx@3.18.0
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.18.0
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

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 React@18.2 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 React@18.2, 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