create-react-appでの失敗記録

事象 : Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App"

• 環境
  • macOS Ventura 13.4.1
  • Docker version 20.10.22, build 3a2c30b
  • Docker Compose version v2.15.1

ディレクトリは問題なく作成されているけれど・・・なんかエラーが出ている。

$ docker-compose run --rm node sh -c 'npx create-react-app reactapp --template typescript'
# ...省略...
Initialized a git repository.
# ...省略...
Run `npm audit` for details.
Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App"
    at checkExecSyncError (node:child_process:885:11)
    at execSync (node:child_process:957:15)
    at tryGitCommit (/usr/src/app/reactapp/node_modules/react-scripts/scripts/init.js:62:5)
    at module.exports (/usr/src/app/reactapp/node_modules/react-scripts/scripts/init.js:350:25)
    at [eval]:3:14
    at Script.runInThisContext (node:vm:129:12)
    at Object.runInThisContext (node:vm:307:38)
    at node:internal/process/execution:79:19
    at [eval]-wrapper:6:22 {
  status: 128,
  signal: null,
  output: [ null, null, null ],
  pid: 120,
  stdout: null,
  stderr: null
}
Removing .git directory...

Success! Created reactapp at /usr/src/app/reactapp
Inside that directory, you can run several commands:
# ...省略...

原因 : Gitアカウント情報が設定されていないから

参考 : node.js - Error creating react application > Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App" - Stack Overflow

例外の内容からコミットに失敗しているので対象のコードを見てみると、親切に最初のコミットをしてくれるようだ。

// reactapp/node_modules/react-scripts/scripts/init.js:62
    // ...省略...
    execSync('git add -A', { stdio: 'ignore' });
    execSync('git commit -m "Initialize project using Create React App"', {
    // ...省略...

git commitすることを知らなかったのでアカウント情報を置いていなくて、Please tell me who you are. - Qiitaを起こしたのと一緒か・・・。

対応 : create-react-appする前にアカウント情報を設定する

「npx create-react-app」する前に
「git config --global user.email "{メールアドレス}"」
と
「git config --global user.name "{ユーザ名}"」を実行する。

$ docker-compose run --rm node sh -c 'git config --global user.email "[e-mail]" && git config --global user.name "ponsuke" && npx create-react-app reactapp --template typescript'
# ...省略...
Run `npm audit` for details.

Created git commit.

Success! Created reactapp at /usr/src/app/reactapp
Inside that directory, you can run several commands:
# ...省略...

失敗した対応 : npxのキャッシュクリア

違う事象だけれどもエラーになったらnpx clear-npx-cacheをする記事がいくつかあったのでやってみた・・・が、状況は変わらなかった。ちゃんと出力されたメッセージは読まなきゃです。

# キャッシュクリアしてみる
$ docker-compose run --rm node sh -c 'npx clear-npx-cache'           
Need to install the following packages:
  clear-npx-cache@1.0.1
# ...省略...
$ docker-compose run --rm node sh -c 'npx create-react-app reactapp' 
# ...省略...事象は変わらず...
Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App"
    at checkExecSyncError (node:child_process:885:11)
# ...省略...

事象 : アプリ用ディレクトリの中身が作成されない

• 環境
  • macOS Ventura 13.4.1
  • Docker version 20.10.22, build 3a2c30b
  • Docker Compose version v2.15.1

DockerコンテナでReactのアプリを作成したら、アプリのディレクトリが作成されるはずが・・・ない・・・。

$ docker-compose build node
$ docker-compose run --rm node sh -c 'npx create-react-app reactapp --template typescript'
# ...省略...
Success! Created reactapp at /reactapp
Inside that directory, you can run several commands:
# ...省略...
# あれ？中身がない・・・
$ find node -type d
node

原因 : WORKDIRを指定していないから

Dockerコンテナに接続して中を見ようと思い・・・起動しようとしてエラーになった・・・。

$ docker-compose up node
[+] Running 1/1
 ⠿ Container reactapp  Created          0.2s
Attaching to reactapp
reactapp  | sh: 1: cd: can't cd to reactapp
reactapp exited with code 2

メッセージ「can't cd to reactapp」をじっと見ると「command: sh -c 'cd reactapp ...」がうまくいかない・・・。

compose.yml

services:
  node:
    container_name: reactapp
    image: node:18.16.1
    volumes:
      - ./node:/usr/src/app
    command: sh -c 'cd reactapp && yarn start'
    # ...省略...

「reactapp」ディレクトリがない・・・マウントしているのは「/usr/src/app」・・・ここまできてやっと気がついた「WORKDIR」を指定しないで「create-react-app」を行ったことに。
Dokcerコンテナの意図しないところに作成されたのか・・・。

対応 : WORKDIRを指定する

今回は、compose.ymlにWORKDIRを指定する。
参考 : docker-compose.ymlでworking directoryを指定する - Qiita

compose.yml

    # ...省略...↓追記↓
    working_dir: /usr/src/app
    # ...省略...

$ docker-compose run --rm node sh -c 'npx create-react-app reactapp --template typescript'
# ...省略...パスがちゃんと「WORKDIR」配下になった
Success! Created reactapp at /usr/src/app/reactapp
Inside that directory, you can run several commands:
# ...省略...
# できた！
$ find reactapp -type d -maxdepth 2
node
node/reactapp
node/reactapp/node_modules
node/reactapp/public
node/reactapp/src