create-react-appをするとエラーがでてプロジェクト作成ができなかった

今回新しく、reactとtypescriptでプロジェクトを作成しようとしたらエラーが出たので解決策を探してみる。

何が起きたのか

npx create-react-app project-name typescript

上記コマンドを叩いてreactとtypescriptのプロジェクトを作成しようとすると以下エラーが発生。

Need to install the following packages:
  create-react-app
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in /Users/********/Documents/project-namedo-list/todolist-youtube.

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

npm ERR! code ERR_SOCKET_TIMEOUT
npm ERR! errno ERR_SOCKET_TIMEOUT
npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/browserslist: Socket timeout
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!     /Users/******/.npm/_logs/2022-05-20T22_09_20_628Z-debug-0.log

Aborting installation.
  npm install --no-audit --save --save-exact --loglevel error react react-dom react-scripts cra-template-typescript has failed.

Deleting generated file... package.json
Deleting project-name/ from /Users/********/Documents/project-name
Done.
Code language: PHP (php)

なんかエラーが起きて最終的にディレクトリが削除されているっぽい〜

解決策

こんな記事があって初めにキャッシュ関連でのエラーが考えられていたのでこちらもキャッシュをクリアしてみる。

npm clear-npx-cache

ほんでもう一度プロジェクトの作成コマンドを叩く！

そしたらエラーなくHappy hacking!の文字が現れた〜

まとめ

エラーってキャッシュ関連のことが多かったり。