Develop Reference

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

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:
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?
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

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

Error: You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1)

As the title says, I cannot run create-react-app.
You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1).
We no longer support global installation of Create React App.
Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app
The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/
Doing this does not change the error. npm uninstall -g create-react-app
I entered this command to try it out and got a message that the tar was out of date.
npm install -g create-react-app
npm WARN deprecated tar#2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm ERR! code EEXIST
npm ERR! path /opt/homebrew/bin/create-react-app
npm ERR! EEXIST: file already exists
npm ERR! File exists: /opt/homebrew/bin/create-react-app
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.
npm ERR! A complete log of this run can be found in:
https://www.npmjs.com/package/tar
I ran the command with this reference.
However, the tar was not updated.
I have already tried all the published solutions, but they don't work. Can someone please help me? Please.
I tried clearing the cache but could not solve the problem.
npx clear-npx-cache
Need to install the following packages:
clear-npx-cache
Ok to proceed? (y) y
I was able to successfully run the following command by specifying the version each time, but it is a hassle and I want to be able to run it normally.
npx create-react-app#latest my-app

The "fish" shell I am currently using is node v18.0.0, so I downgraded to v16.15.0 and it works fine.
fisher install jorgebucaran/nvm.fish
nvm install v16
I had forgotten to lower the node version in fish because it had been working fine with zsh.

React Installation problem npx-create-react-app not working properly

This is the error that Im facing every-time i do npx create-react-app app-name.
At first It was all good everything was working perfectly but all of a sudden it's been a few days since Im facing this error and i cant seem to solve it.
hassan_xiddiqui#Kratos:~/React$ npx create-react-app starter_1
Need to install the following packages:
create-react-app
Ok to proceed? (y) y
Creating a new React app in /home/hassan_xiddiqui/React/starter_1.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
npm ERR! code ECONNRESET
npm ERR! errno ECONNRESET
npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/eslint-plugin-jsx-a11y: aborted
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'
npm ERR! A complete log of this run can be found in:
npm ERR! /home/hassan_xiddiqui/.npm/_logs/2021-04-03T12_14_14_243Z-debug.log
Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed.
Deleting generated file... package.json
Deleting starter_1/ from /home/hassan_xiddiqui/React
Done.

The error is very clear in the message you're receiving:
This is a problem related to network connectivity.
In most cases you are behind a proxy or have bad network settings.
If you are behind a proxy, please make sure that the
'proxy' config is set properly. See: 'npm help config'
If you're using a VPS, disable it. Try checking your DNS settings, maybe change them to Google's.
Also, try to install anything from NPM to confirm this is an issue with your connection. npm install -g create-react-app. If this (or any other package) succeeds, it may be other issue.
Consider as well it could be an issue with npx on your machine. Try installing it using create-react-app directly instead by first installing it globally (like I showed above)

It's more of an network error you can check the config or try to flush your dns or something. Maybe try some other network if possible

Try to install npm again using: npm install
Also check what node version you're using: node --v
Then, run the command again: npx create-react-app app_name

Gatsby - Command failed with exit code 1: npm install

I'm trying to start my first Gatsby project but keep encountering the same error when creating a new project.
After running gatsby new project-1, I get the following error:
npm ERR! Maximum call stack size exceeded
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/tom.allen/.npm/_logs/2020-06-18T15_54_40_537Z-debug.log
ERROR
Command failed with exit code 1: npm install
Error: Command failed with exit code 1: npm install
- error.js:56 makeError
[lib]/[gatsby-cli]/[execa]/lib/error.js:56:11
- index.js:114 handlePromise
[lib]/[gatsby-cli]/[execa]/index.js:114:26
- task_queues.js:97 processTicksAndRejections
internal/process/task_queues.js:97:5
- init-starter.js:139 async install
[lib]/[gatsby-cli]/lib/init-starter.js:139:7
- init-starter.js:206 async clone
[lib]/[gatsby-cli]/lib/init-starter.js:206:3
- init-starter.js:345 async initStarter
[lib]/[gatsby-cli]/lib/init-starter.js:345:19
- create-cli.js:400
[lib]/[gatsby-cli]/lib/create-cli.js:400:7
I have tried deleting the node_modules inside the project folder and running npm i again but I can't work out how to fix this issue. I'm on node v12.17.0 if that makes a difference... Any help will be really appreciated!

Install nvm
We strongly recommend using a Node version manager like nvm to install Node.js and npm. We do not recommend using a Node installer, since the Node installation process installs npm in a directory with local permissions and can cause permissions errors when you run npm packages globally.
npm's docs
If you have installed Node via some package manager or some Node installer, first of all, uninstall it and instead install Node from nvm. In my case I had installed Node via NodeSource, so:
sudo apt purge node
Go ahead and install nvm, following the instructions on the Github repo. I had to include the shell script manually in my ~/.zshrc because the nvm script didn't do.
Install node and npm via nvm
Run the following to install Node and npm: nvm install node
Now, in order to make gatsby new works, you will need to install a previous version of node, which will be: v14.13.1. Run the following command and you will install the mentioned version:
nvm install 14.13.1
Select the Node version to use if is not selected:
nvm exec 14.13.1 node --version
Gatsby
Now, you only need to install Gatsby CLI, and then simply use it.
Run the following: npm install -g gatsby-cli
Go to the folder where you want to create your project and then run:
gatsby new [your-project-name] https://github.com/thomaswangio/gatsby-personal-starter-blog

So there's a few suggestions:
Hard cache removal: npm cache clean --force
Upgrade gatsby-cli version: npm update
Delete node_modules and .cache folder
Keep in mind removing package-lock.jsonto unlock you dependencies.

What happened to the esprima-six npm module?

My npm project has the esprima-six npm module as a transitive dependency. Recently, it has become impossible to download, as seen in the following output from npm install:
npm ERR! 404 Not Found
npm ERR! 404
npm ERR! 404 'esprima-six' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it
npm ERR! 404 It was specified as a dependency of 'syntax-error'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, or http url, or git url.
On the npm site, esprima-six cannot be found:
https://www.npmjs.com/package/esprima-six
But Google's cache for the page shows that it used to exist: http://webcache.googleusercontent.com/search?q=cache:81uuMFHrDeMJ:https://www.npmjs.com/package/esprima-six+&cd=1&hl=en&ct=clnk&gl=uk&client=ubuntu
So why did the module become unavailable? And what is the best way to get my project building again?
Edit: in the end I updated the dependency which depended on esprima-six to a later version which didn't need it.

esprima-six has been unpushlished and is no more.
It's hard to track down what exactly has happened, but it seems that esprima-six was a module based on the unofficial harmony branch of the project that has been discountinoud in May 2015, following the deprecation of esprima-fb (a fork that added JSX syntax).
And now esprima-six is no longer needed, as Esprima 2.0 officially supports ES6.
What is the best way to get my project building again?
The stance of Ariya Hidayat, Esprima's maintainer, is that you should just switch to Esprima 2.x.
My project has the esprima-six npm module as a transitive dependency.
In that case, it's probably enough to update your direct dependency, they will have switched already.