ダイキのアプリ開発ナレッジ

アプリ開発のナレッジを掲載します

Create-React-Appのコマンド実行で失敗する事案の対処

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" --global

npm 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-cache

If 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

参考
npx create-react-appで"Error: EPERM: operation not permitted, mkdir 'C:\Users\〇〇 ' command not found: create-react-app" - Qiita



解決法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