ReactとViteを利用する開発環境を構築する際につまづいたのでメモ．

環境

macOS Sonoma 14.5
npm 10.8.2

問題

sudo npm create vite@latest コマンドを実行した際に以下のエラーが発生し，プロジェクトの作成に失敗しました．ホームディレクトリの.npmディレクトリの中身に問題がありそうです．

npm error code ENOTEMPTY
npm error syscall rename
npm error path /Users/hoge/.npm/_npx/1415fee72ff6294b/node_modules/create-vite
npm error dest /Users/hoge/.npm/_npx/1415fee72ff6294b/node_modules/.create-vite-2BqRj1v7
npm error errno -66
npm error ENOTEMPTY: directory not empty, rename '/Users/hoge/.npm/_npx/1415fee72ff6294b/node_modules/create-vite' -> '/Users/hoge/.npm/_npx/1415fee72ff6294b/node_modules/.create-vite-2BqRj1v7'
npm error A complete log of this run can be found in: /Users/hoge/.npm/_logs/2024-07-15T09_09_04_380Z-debug-0.log

解決した方法

directory not emptyとされていたため，エラー文中のパスのうち->の後ろのディレクトリの中身をすべて削除しました．

rm -rf ~/.npm/_npx/1415fee72ff6294b/node_modules/.create-vite-2BqRj1v7/*

すると，無事sudo npm create vite@latestコマンドが通りました．

尚，中身だけ消したはずの.create-vite-2BqRj1v7ディレクトリ自体も消えていたため，ディレクトリをまるごと消す

rm -rf ~/.npm/_npx/1415fee72ff6294b/node_modules/.create-vite-2BqRj1v7

でも良いと思われます．

蛇足：問題の原因について

問題の原因について詳しいことはわかりませんでした．

下記の一文からディレクトリ.create-vite-2BqRj1v7に何らかの理由でデータがすでに格納されてしまっていたことに糸口があるのかなと思いました．
.create-vite-XXXXXXというディレクトリとその中身がどのタイミングで生成されるのかがわかることで，この問題の根幹が見えてきそうな気がします．

npm error ENOTEMPTY: directory not empty, rename '/Users/hoge/.npm/_npx/1415fee72ff6294b/node_modules/create-vite' -> '/Users/hoge/.npm/_npx/1415fee72ff6294b/node_modules/.create-vite-2BqRj1v7'

また，同様のエラーが記載されている以下のような記事をみつけました．

上記の記事ではVSCodeを開いた状態でnpmコマンドを実行するのがよくないかもしれないと記載されています．

私の場合はVSCodeをフォークして開発されたCursorというエディタを利用しています．問題発生時はこのエディタを開いた状態で操作していたと思いますが，すでに問題を解決した後でしたのでこのエディタを閉じても解決したかどうかは確認できていません．