LoginSignup
0
0
この記事誰得? 私しか得しないニッチな技術で記事投稿!

create-react-appでの失敗記録

Last updated at Posted at 2023-07-05

事象 : 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 "ponsuke@example.com" && 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
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0