others-How to solve `We no longer support global installation of Create React App.` when trying to create react app using `npx create-react-app`?

Dec 15, 2021

1. Purpose

In this post, I would demonstrate how to solve the following error when trying to create an react app using npx:

/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npx-cli.js create-react-app .

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

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/

Done

2. The solution

2.1 Debug

According to the above error message, we probably installed the create-react-app package globally, let’s check:

➜  ~ create-react-app
zsh: command not found: create-react-app
➜  ~

It seems that we have not installed the creat-react-app globaly.

We can verify it by list all the globally installed packages:

➜  ~ npm list -g
/usr/local/lib
├── @vue/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

So the create-react-app is not installed globally. Why the error message say that I have installed the package globally?

2.2 The path to success

So I searched a lot for the solution ,here is the trying process:

2.2.1 Trying to upgrade npm

npm i -g npm@latest

But I got this error:

➜  ~ npm i -g npm@latest
npm ERR! code EACCES
npm ERR! syscall rename
npm ERR! path /usr/local/lib/node_modules/npm
npm ERR! dest /usr/local/lib/node_modules/.npm-i9nnxROI
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/npm' -> '/usr/local/lib/node_modules/.npm-i9nnxROI'
npm ERR!  [Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/npm' -> '/usr/local/lib/node_modules/.npm-i9nnxROI'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'rename',
npm ERR!   path: '/usr/local/lib/node_modules/npm',
npm ERR!   dest: '/usr/local/lib/node_modules/.npm-i9nnxROI'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/bswen/.npm/_logs/2021-12-15T11_47_34_810Z-debug.log
➜  ~

It’s a permission problem, change it to run as root:

➜  ~ sudo npm i -g npm@latest
Password:

removed 8 packages, changed 24 packages, and audited 215 packages in 4s

10 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
➜  ~

Now check the npm/node version again:

➜  ~ npm version
{
  npm: '8.3.0',
  node: '17.1.0',
  v8: '9.5.172.25-node.13',
  uv: '1.42.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.18.1',
  modules: '102',
  nghttp2: '1.45.1',
  napi: '8',
  llhttp: '6.0.4',
  openssl: '3.0.0+quic',
  cldr: '39.0',
  icu: '69.1',
  tz: '2021a',
  unicode: '13.0',
  ngtcp2: '0.1.0-DEV',
  nghttp3: '0.1.0-DEV'
}

now try to create react project using webstorm again, still got this error:

/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npx-cli.js create-react-app .

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

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/

Done

2.2.2 Trying to uninstall it globally

Though I do not installed the create-react-app globally, I still follow the instructions in the error message:

➜  WebstormProjects npm uninstall -g create-react-app

up to date, audited 1 package in 304ms

found 0 vulnerabilities
➜  WebstormProjects

I even cleaned the cache, but still not work:

➜  WebstormProjects npm cache clean -f         
npm WARN using --force Recommended protections disabled.
➜  WebstormProjects npx create-react-app my-app

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

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/

➜  WebstormProjects

2.2.3 Trying to install the `create-react-app` again

still not work:

➜  WebstormProjects npm i create-react-app

up to date, audited 139 packages in 6s

4 packages are looking for funding
  run `npm fund` for details

3 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
➜  WebstormProjects

2.2.4 Trying to downgrade node and npm to stable version

➜  WebstormProjects sudo n stable
  installing : node-v16.13.1
       mkdir : /usr/local/n/versions/node/16.13.1
       fetch : https://nodejs.org/dist/v16.13.1/node-v16.13.1-darwin-x64.tar.xz
   installed : v16.13.1 (with npm 8.1.2)
➜  WebstormProjects npm version

➜  WebstormProjects npm version
{
  npm: '8.1.2',
  node: '16.13.1',
  v8: '9.4.146.24-node.14',
  uv: '1.42.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.18.1',
  modules: '93',
  nghttp2: '1.45.1',
  napi: '8',
  llhttp: '6.0.4',
  openssl: '1.1.1l+quic',
  cldr: '39.0',
  icu: '69.1',
  tz: '2021a',
  unicode: '13.0',
  ngtcp2: '0.1.0-DEV',
  nghttp3: '0.1.0-DEV'
}

Then try again, still not work:

npx create-react-app my-app

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

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/

Done

2.3 The solution

Then I realize that I might have installed the create-react-app in the current directory, not globally, so I tried to uninstall it without -g option.

➜  WebstormProjects npm uninstall create-react-app

removed 63 packages, and audited 76 packages in 1s

found 0 vulnerabilities
➜  WebstormProjects

Now try again to create react app:

➜  WebstormProjects npx create-react-app my-app      
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y
npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in /Users/bswen/WebstormProjects/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

⸨#####⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⸩ ⠸ idealTree:readable-stream: sill placeDep ROOT [email protected] OK for: readab

It works!

3. Summary

In this post, I demontrated how to solve the We no longer support global installation of Create React App problem when trying to create react app using npx create-react-app my-app, the key point is to check if you have installed the old version of create-react-app locally or globally, you should check it globally or locally . That’s it, thanks for your reading.