【React】create-react-appで躓いたこと #React

create-react-app で Reactアプリを作成したときに、うまくアプリの起動ができなかったため、その経緯と対応を記載します。
※本記事は、windowsでの実施したものとなります

##1. create-react-app の実行手順
初めに、npm と node の version確認を行います。

cmd

C:\Users\ユーザー名>npm -v
6.12.1
C:\Users\ユーザー名>node -v
v13.1.0

npm と node がインストールされていることを確認したので、
create-react-app を実行します。

cmd

C:\Users\ユーザー名>npx create-react-app my-app

途中の表示は省略

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

create-react-app にて、Reactアプリが作成できました。

##2. エラーの検出と対応

create-react-app もうまくいったみたいなので、意気揚々と実行してみる。

cmd

C:\Users\ユーザー名>cd my-app
C:\Users\ユーザー名\my-app>npm start

むむむ、こんなエラーが。

cmd

> atelier@0.1.0 start C:\Users\ユーザー名\my-app
> react-scripts start

internal/modules/cjs/loader.js:548
  throw e;
  ^

Error: Package exports for 'C:\Users\ユーザー名\my-app\node_modules\postcss-safe-parser\node_modules\postcss' do not define a valid '.' target
    at resolveExportsTarget (internal/modules/cjs/loader.js:545:13)
    at applyExports (internal/modules/cjs/loader.js:459:14)
    at resolveExports (internal/modules/cjs/loader.js:508:12)
    at Function.Module._findPath (internal/modules/cjs/loader.js:577:20)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:879:27)
    at Function.Module._load (internal/modules/cjs/loader.js:785:27)
    at Module.require (internal/modules/cjs/loader.js:956:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (C:\Users\ユーザー名\my-app\node_modules\postcss-safe-parser\lib\safe-parse.js:1:17)
    at Module._compile (internal/modules/cjs/loader.js:1063:30) {
  code: 'MODULE_NOT_FOUND'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm 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\ユーザー名\AppData\Roaming\npm-cache\_logs\2020-11-29T14_05_22_479Z-debug.log

Google先生にエラーを尋ねてみると、以下の記事にヒントが。
https://github.com/vercel/next.js/issues/18828

どうやら node の versionが合っていないことが原因みたいでした。

windowsでの node の update方法は、https://nodejs.org/ja/ からインストーラーをダウンロードしてきて、それをインストールすればOKです。
インストール後、node の versionを確認します。

cmd

C:\Users\ユーザー名>node -v
v14.15.3

node の versionが更新されていることを確認したので、再度 npm start を実行します。

cmd

C:\Users\ユーザー名>cd my-app
C:\Users\ユーザー名\my-app>npm start

> my-app@0.1.0 start C:\Users\ユーザー名\my-app
> node scripts/start.js

i ｢wds｣: Project is running at http://xxx.xxx.x.xx/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from C:\Users\ユーザー名\my-app\public
i ｢wds｣: 404s will fallback to /
Starting the development server...
Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://xxx.xxx.x.xx:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

起動に成功しました！

##3. まとめ

create-react-app にとって、node の versionが鬼門
windows版だと、node のアップデートは、公式サイトからインストーラーをダウンロードしないといけない