Create-React-Appのコマンド実行で失敗する事案が発生
(npx create-react-appで"Error: EPERM: operation not permitted, mkdir 'C:\Users\〇〇 ' command not found: create-react-app")
PCのユーザー名にスペースが含まれることが原因っぽかったので、対処法を備忘録
解決法1
npxがキャッシュを作ろうとしているときに半角スペースによって、本来フォルダ作成権限のないところユーザー以下のフォルダに
以下を参考にしたらうまくいくかもと思って実行するも
Running npx globally does not work on Windows when the user folder patch contains a space · Issue #146 · zkat/npx · GitHub
if you want to use current path that has space in username "C:\Users\Firstname Lastname\AppData\Roaming\npm-cache"
you can replace the string after space with "~1"
npm config set cache "C:\Users\Firstname~1\AppData\Roaming\npm-cache" --globalnpm config set cache "C:\Users\[半角スペースで区切られる手前のユーザー名]~1\AppData\Roaming\npm-cache" --global
ここで書かれている~1はエイリアスの文字列だったはず(半角スペースで区切られてるユーザー名を補完するワイルドカードだったような気がする)
自分の場合上記でうまくいかなかったが、ここに解決方法が書いてあった
どうやらミドルネームが入るような半角スペースを複数含むユーザー名だと最初の6文字を大文字にしてその後ろに~1をつけるエイリアス名もとれる模様
Running npx globally does not work on Windows when the user folder patch contains a space · Issue #146 · zkat/npx · GitHub
you can replace the string after space with "~1"
@citoreek It's a bit more complicated. You remove all the spaces from the folder name, then you take the first 6 characters of the folder name and postfix it with ~1. Officialy, you should also uppercase it, but I found it doesn't make a difference.
So the full path of my folder was:
C:\Users\Gijs van Dam\AppData\Roaming\npm-cache
the path with the short folder name is:
C:\Users\GIJSVA~1\AppData\Roaming\npm-cacheIf you want to be sure, you can use
dir /x in cmd
or
cmd /c dir /x in powershell to see the short file and folder names inside a folder.
複数の半角スペースを含むユーザー名:Gijs van Dam は エイリアス名:GIJSVA~1 に書き換えることで、パスを通すことができる模様
自分の場合はこれで解決した
npm config set cache "C:\Users\[ユーザー名大文字6文字]~1\AppData\Roaming\npm-cache" --global
解決法2
以下ではうまくいくが、なぜ通るのかはよくかわからない
1. npm cache clean --force 2. npm install create-react-app --force 3. npm fund 4. npx create-react-app <app-name>
参考
【React】npx create-react-app my-appに失敗したとき ~ PCのユーザー名に空白があった時の対処法 ~ - Qiita