1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

#7 Reactが開かない!fileが起動できない場合の対処法と原因(初学者の単純ミス)

Last updated at Posted at 2022-10-23

ご覧いただきありがとうございます。

reactファイル一式をダウンロードしてローカルで立ち上げたら、起動しない状況が発生しました。

今回、

  • ①事象
  • ②実行したこと
  • ③参考URL
  • ④原因
  • ⑤最後に

という構成で残します。

初学者にありがちだと思いますが、エラー発生時はなんとなく検索したコマンドを実行して解消するということってしますよね?

私は理解したくないコマンドを打ちたくはないと思っているけど、結局そうなっています…。

そのため、出来る限り原因究明に努めたいと思います。

なお、色々見返してわかったのですが、今回はnode_modulesファイルがないという単純ミスが原因でした。

ただ、原因究明をする過程で、気づきがありましたのできちんと言語化し残したいと思います。

①事象:ファイルが開かない

reactが起動しない事象が発生しました。

  1. Reactで作成されたファイル一式をダウンロード
  2. npm startと起動
  3. 下記エラー文
///var/folders/4f/69vfwfg91c1d76wm6w6w5wq80000gn/T/start-a35cecf0.sh: command not found

なお、事象が起きた背景としては、現在Udemyでreactの勉強をしています。

600本の動画があり、現在200本が過ぎたあたりです。

ファイル一式をダウンロードしてローカルで立ち上げてみたら、起動しない状況が発生しました。

②対処:エラー解消のために実施したこと

下記、ファイル削除とインストールを実施したら出来ました!

  1. delete node_modules directory:
    rm -rf node_modules
  2. reinstall all dependencies
    npm install

私の場合は、(再)インストールしたらローカルで起動できました。

そもそもファイルがありませんでしたので、インストールしたというだけです

③参考URL:3つ

  1. React公式ドキュメント
  2. エラー文の一部をコピペして検索したQAサイト
  3. Qiita

④原因:node-modulesのファイルが欠けていた

エラー文はnot foundとなっていたので振り返ってみました。

  1. node-modulesのファイルが欠けていた(これ)
  2. 使用しているパッケージマネージャがyarnだったからコマンドが違った(当方はnpm)

判明した背景

解凍したzipファイルをみたら、「node-modules」ファイルが一式ありませんでした。

そりゃ not found て出ますよね!

ただ、今まで npx create-react-app my-appのコマンドで何のファイルを作成しているかきちんと理解していなかったことがわかり、勉強となりました。

調べている中で他に起こりそうなエラー:コマンドの間違い(npm start/yarn start)

まず、Reactの公式には、「Create React App」で起動した場合、npm start で起動してくださいと記載されていました。

Create React App

プロジェクトが Create React App で構築されているなら、以下のコードを実行してください。

...(中略)

通常の開発作業では、npm start を使用してください。

参考:React公式

そして、Githubを確認するとyarn startで起動とも記載されています。

npm start or yarn start
Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

参考:facebook/create-react-app

今後、Reactのファイルをインストールしてローカルで起動する場合は、パッケージマネージャによってコマンドが違うことを意識したいなと思いました。

⑤最後に

今回は、単純なミスが原因のエラーでした。

勉強をしていて、エラーを解消できたはいいものの、原因は何だろうということは多々あったので間違ってもいいので言語化していきたいと思います。

1
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?