久しぶりにcreate-react-appして少しハマったときのメモ
久々にreact触ってみようと
create-react-appを叩いてyarn startを叩くとエラーになった
yarn run v1.13.0 error Command "start" not found. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
先に解決法を述べると以下のページを参考にさせて頂いた qiita.com
hello-world-beyond-that-point.blog.jp
上記のページが消えたら自分が困るので残しておくのだけれど、
古いcreate-react-appコマンドが残っていた場合に起こる問題っぽい。
以前にcreate-react-appを導入していた場合は古いものを消してnpxでcreate-react-appを叩く
npm uninstall -g create-react-app npx create-react-app my-app
ただ、自分も途中で公式の方見て上のコマンドを実施したのだけれど解決せず、
Qiitaの方でコメントにある通りの内容で解決した
# uninstallで削除した後にコマンドが残っていないか調べる # パスが表示されたら削除するか移動する which create-react-app
この内容はスタックオーバフローに記載されているもよう Template not provided using create-react-app
以下自分用メモ
npm周りはバージョンや依存関係が複雑な印象があって、
エラーになってもまたバージョン問題かなと決めつけてしまう自分がいる。
今回も npm create-react-appを叩いてファイルが出来上がってnpm startでこけた時点でnodeやモジュールのバージョンの更新を実施した。
それでもうまくいかないと少し手詰まり気味になったので（調べてはみるのだけど自分の中であたりもつかない状態）もう少しnpmの知識を深めたい
今回良くなかった自分のアクション
・コマンドを叩いた後の結果の文言をちゃんと見ていなかった
コマンドを叩く際に戻ってきたステータスコードはみるのだけど、
たくさん流れてくる文言をちゃんと読んでおらず、最後にこんな文言が出ていたのを見落としていた
A template was not provided. This is likely because you're using an outdated version of create-react-app. Please note that global installs of create-react-app are no longer supported.
戻り値が0以外なら文言を読むのだが、
0が返ってきてディレクトリも生成されてうまく行かないケースがあるということが意識になかった
・yarn start(npm start)が何をしているのかよくわからず叩いていた
yarn startしたときに出たエラー
$yarn start yarn run v1.13.0 error Command "start" not found.
そもそもエラーの意味もわからず調べると
startはpackage.jsonの中のタスクを叩いていると知った
うまくstartできなかったときのpackage.jsonはたしかにstartがなかった
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
}
}
正しく生成されたケース
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
これらはnpm scriptといわれるものっぽい。 ics.media
ここでは深堀りしないけど、ここらん少し深ぼってみるの楽しそうだと感じた。
その他
雑にページ全体をグーグル翻訳していたのだけど
npm startがasl startと訳されてて少し混乱した
(他のコマンドが一切翻訳されていなかったので、ここだけ変に翻訳されているとは思わなかった)
また変に調べてaslとかいうのがあるから余計
asl - npm
翻訳されていないようにみえても最低コマンドだけは原文で見るようにしたい
npmとyarnって何が違うのか。
とりあえず今は環境が動いてくれればいいという知識レベルなので似たようなのがあるのは鬱陶しく感じる
とりあえずnpm startとyarn startはそんなに大きな違いはないっぽい
（npm startでやってるページやyarn startでやってるページが散らばっていたように思うので混乱した）
stackoverflow.com
www.webprofessional.jp
あと検索の仕方が悪かったように思う。
そもそも「テンプレートができていない」という状況を理解できていないから、
yarn start( or npm start)ができない、キャッシュが残ってる？みたいな調べ方をしてしまった
(ただpackage.jsonへの理解が足りていなかったせいで、今回で少し理解が進んだからそれはそれでよかったと思う）
雑感
・React少し学びなおしたいと思ったらこんなんで躓いてしまった。
・create-react-appコマンド自体に結構しっかりしたページが用意されているのには驚いた。
typescriptとの組み合わせとかも書かれていたのでまた読み込みたい
