create-react-appの後yarn startがエラーになる

Question

こちらの記事を参考にReactの環境をWindows 10で、PowerShellを使って構築しようとしています。

$node -v
v10.15.3

$npm -v
6.4.1

$npm install -g create-react-app
$create-react-app my-app
$cd my-app

ここまでは問題ないのですが、次の「yarn start」の後に問題が発生します。

$yarn start
yarn run v1.16.0
$ react-scripts start
Starting the development server...

events.js:174
      throw er; // Unhandled 'error' event
      ^

Error: spawn cmd ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:240:19)
    at onErrorNT (internal/child_process.js:415:16)
    at process._tickCallback (internal/process/next_tick.js:63:19)
Emitted 'error' event at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:246:12)
    at onErrorNT (internal/child_process.js:415:16)
    at process._tickCallback (internal/process/next_tick.js:63:19)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

何がいけないのか分からないので、教えていただきたいです。

【※追記】
上記の構築方法は古い方法のようでした。
npm uninstall -g create-react-appでアンインストールを実行した後、
公式ページに倣って以下の方法を試しましたが、再びエラーが出てしまいました。

npx create-react-app my-app
cd my-app
npm start

npm startの後に出てきた、エラー内容は以下の通りです。

> my-app@0.1.0 start C:\Users\username\Desktop\react-lesson\my-app
> react-scripts start
Starting the development server...

events.js:174
      throw er; // Unhandled 'error' event
      ^

Error: spawn cmd ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:240:19)
    at onErrorNT (internal/child_process.js:415:16)
    at process._tickCallback (internal/process/next_tick.js:63:19)
Emitted 'error' event at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:246:12)
    at onErrorNT (internal/child_process.js:415:16)
    at process._tickCallback (internal/process/next_tick.js:63:19)npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1npm ERR!
npm ERR! Failed at the my-app@0.1.0 start script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:npm ERR!     C:\Users\username\AppData\Roaming\npm-cache\_logs\2019-05-20T02_31_11_981Z-debug.log

Comments

[maisumakun]

ターミナル環境は何を使っていますか？（コマンドプロンプト、Git Bash/MSYS、PowerShell、WSLなど）

[ike-0315]

powershell を使っています。

Answer 1

公式サイト見ると、npm install -g create-react-appがもう使われていないみたいです。
https://facebook.github.io/create-react-app/docs/getting-started

注意書きで、こんな事も書いてあります。

If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version.

google翻訳かけたのがこれです。

以前にnpm install -g create-react-appを使用してcreate-react-appをグローバルにインストールしたことがある場合は、npxが常に最新バージョンを使用するように、npm uninstall -g create-react-appを使用してパッケージをアンインストールすることをお勧めします。

上手くいかない場合は、公式サイトの通りにしてみるといいかもしれません。

yarn使うなら、公式サイトのyarnでの導入方法を試すとどうでしょうか？
僕はmacですが、yarnの導入方法ですんなり起動しました。

yarn create react-app my-app
cd my-app
yarn start

Comments

[ike-0315]

回答ありがとうございます。
公式の方法を試してみましたが、やはり似たようなエラーが発生してしまいました。

質問内容の後半にそちらのエラー内容を追加したので、もしお時間あればよろしくお願いいたします。

[uemaSR]

こちらのmac環境だとすんなりいったので詳しくわかりませんが、windowsでよくあるエラーだと環境変数の問題などがあります。そちらの対策はされてますか？

Answer 2

別のパソコンで、

npx create-react-app my-app
cd my-app
npm start

を実行したら、すんなりいきました。

Comments

[uemaSR]

解決して良かったです。
node関連は、過去の環境とかが残ってて悪さするのとか多いですよね。
多分globalに入れたwebpackなどがバッティングしてるんですかね。。
僕もたまにクリーンな環境に戻したりします。