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


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

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

```ruby:cmd
C:\Users\ユーザー名>npm -v
6.12.1
C:\Users\ユーザー名>node -v
v13.1.0
```
`npm` と `node` がインストールされていることを確認したので、
`create-react-app` を実行します。

```ruby: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` もうまくいったみたいなので、意気揚々と実行してみる。

```ruby:cmd
C:\Users\ユーザー名>cd my-app
C:\Users\ユーザー名\my-app>npm start
```
むむむ、こんなエラーが。

```ruby: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を確認します。

```ruby:cmd
C:\Users\ユーザー名>node -v
v14.15.3
```
 `node` の versionが更新されていることを確認したので、再度 `npm start` を実行します。

```ruby: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.
```

起動に成功しました！
![create-react-app画像.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455342/1e18a3fd-2352-1878-5815-1ad1565df8a4.png)
##3. まとめ
- `create-react-app` にとって、`node` の versionが鬼門
- windows版だと、`node` のアップデートは、公式サイトからインストーラーをダウンロードしないといけない