Reactの環境構築でつまずいた件

※Create React App は、2022-04-12 を最後にアップデートが終わり、2025年現在はこちらは古いやり方なのだとご指摘いただきました！※

MacでNode.jsとyarnのインストール後、「これから、フォルダ内に作るぞ！」というところで、つまずきました。

・バージョンの不一致
・脆弱性の修正
・Web-vitalsが無い
この３つを解決して、無事、環境を構築できましたので記していきます。

## 最初のつまずき
<p>新しいReactプロジェクト作成の、次のコマンドを打ち込みました。</p>

```
MacBook-Pro:~ desktop username$ npx create-react-app sample 
```

すると出てきたエラーの弾幕
```
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: sample@0.1.0
npm error Found: react@19.0.0
npm error node_modules/react
npm error   react@"^19.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.0.0" from @testing-library/react@13.4.0
npm error node_modules/@testing-library/react
npm error   @testing-library/react@"^13.0.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /Users/username/.npm/_logs/2025-01-26T13_28_44_816Z-eresolve-report.txt
npm error A complete log of this run can be found in: /Users/username/.npm/_logs/2025-01-26T13_28_44_816Z-debug-0.log
`npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed
```

…。
初っ端から弾幕でビビりましたが、AIにも聞きながら、解決していこうと思います。

--------------------
### 行動１：reactのバージョンを18.3.1に落とす
<p>上記の記述を見ると「.npm」の「_logs」の中にエラーレポートがあるようなので見にいきます。</p>
<p>Finderから「⌘ shift .」で隠しファイルを表示させて、「.npm > _logs」からレポートを見にいくと次の記述でした。</p>

```
While resolving: sample@0.1.0
Found: react@19.0.0
node_modules/react
  react@"^19.0.0" from the root project

Could not resolve dependency:
peer react@"^18.0.0" from @testing-library/react@13.4.0
node_modules/@testing-library/react
  @testing-library/react@"^13.0.0" from the root project
  ```
<p>「@testing-library/react は、reactのバージョン18.0.0 を必要としているのに、プロジェクトでは reactのバージョン19.0.0 が使用されています。」とのことで、バージョンが一致していないことが原因のようです。</p>

<p>該当のディレクトリ(この場合はsampleフォルダ)に移動して、「package.json」ファイルの「dependencies」の記述内のreactのバージョンを18.3.1にします。</p>

```
$ cd sample
$ npm install -save react@18.3.1 react-dom@18.3.1
```
------------
### 行動２：脆弱性の修正
<p>今度は次の記述が出てしまいました。<br>
「8つの脆弱性があり、うち６つは高いレベル(できるだけ早い対応が必要)の脆弱性です」</p>

```
added 1 package, changed 4 packages, and audited 1326 packages in 3s

268 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
```

```$ npm audit```で詳細を確認します。以下は詳細。

```
nth-check  <2.0.1
Severity: high
Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr
fix available via `npm audit fix --force`
Will install react-scripts@3.0.1, which is a breaking change
node_modules/svgo/node_modules/nth-check
  css-select  <=3.1.0
  Depends on vulnerable versions of nth-check
  node_modules/svgo/node_modules/css-select
    svgo  1.0.0 - 1.3.2
    Depends on vulnerable versions of css-select
    node_modules/svgo
      @svgr/plugin-svgo  <=5.5.0
      Depends on vulnerable versions of svgo
      node_modules/@svgr/plugin-svgo
        @svgr/webpack  4.0.0 - 5.5.0
        Depends on vulnerable versions of @svgr/plugin-svgo
        node_modules/@svgr/webpack
          react-scripts  >=2.1.4
          Depends on vulnerable versions of @svgr/webpack
          Depends on vulnerable versions of resolve-url-loader
          node_modules/react-scripts

postcss  <8.4.31
Severity: moderate
PostCSS line return parsing error - https://github.com/advisories/GHSA-7fh5-64p2-3v2j
fix available via `npm audit fix --force`
Will install react-scripts@3.0.1, which is a breaking change
node_modules/resolve-url-loader/node_modules/postcss
  resolve-url-loader  0.0.1-experiment-postcss || 3.0.0-alpha.1 - 4.0.0
  Depends on vulnerable versions of postcss
  node_modules/resolve-url-loader
```

<p>
原因は<br>
「nth-checkのバージョンが2.0.1より低い(そしてそれに付随する諸々)」
「postcssのバージョンが8.4.31より低い」<br>
ということにありそうです。
</p>

念のため```$ npm ls nth-check```で、「nth-check」のバージョンを確認。
確かに「@svgr/webpack@5.5.0」の分岐にある「nth-check」のバージョンが1.0.2で、2.0.1より低く脆弱でした。
```
sample@0.1.0 /Users/username/Desktop/sample
└─┬ react-scripts@5.0.1
  ├─┬ @svgr/webpack@5.5.0
  │ └─┬ @svgr/plugin-svgo@5.5.0
  │   └─┬ svgo@1.3.2
  │     └─┬ css-select@2.1.0
  │       └── nth-check@1.0.2
  └─┬ html-webpack-plugin@5.6.3
    └─┬ pretty-error@4.0.0
      └─┬ renderkid@3.0.0
        └─┬ css-select@4.3.0
          └── nth-check@2.1.1
```
<br>

同じく```$ npm ls postcss```で、「postcss」のバージョンも確認。
「postcss」のバージョンが7.0.39で、8.4.31より低く脆弱でした。

```
└─┬ react-scripts@5.0.1
（略）
  ├─┬ resolve-url-loader@4.0.0
  │ └── postcss@7.0.39
```

最初の記述で、これらの脆弱性は
```$ npm audit fix --force```で解決するよとのことでしたので、このコマンドを実行します。

ところが！脆弱性が163個に増えてしまいました！笑
どうして…構造が複雑だったのでしょうか。
```
163 vulnerabilities (1 low, 121 moderate, 38 high, 3 critical)
```

もう一度
```$ npm audit fix --force```
とすると、「8つの脆弱性があり、うち６つは高いレベル(できるだけ早い対応が必要)の脆弱性です」という、前の段階に戻り堂々巡りになったので、「package.json」に「overrides」することにしました。

「package.json」を開いて、「dependencies 」の下に 「overrides」というセクションを追加します。
「nth-check」と「postcss」のバージョンを記述していきます。
```
"dependencies": {
    "cra-template": "1.2.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "^5.0.1"
  },
  "overrides": {
    "nth-check": ">=2.0.1",
    "postcss": ">=8.4.31"
  },
```

これでファイルを保存し、
```$ npm install```
とコマンドを実行して、overrides に指定したバージョンにパッケージを更新します。
脆弱性が0個になりました！

```
found 0 vulnerabilities
```

---
### 行動３：web-vitals のインストール(+α)
これで```$ yarn start```としました。
「いよいよ、Reactが立ち上がるのか…！」と期待しましたが…
ブラウザが立ち上がったものの、またしてもエラーです。
![スクリーンショット 0007-01-27 10.22.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3995314/b4ebb221-06f7-b14b-2bd3-fdf37d9bfbde.png)

ターミナルのエラー表示は以下。
```
Failed to compile.

Module not found: Error: Can't resolve 'web-vitals' in '/Users/username/Desktop/sample/src'
ERROR in ./src/reportWebVitals.js 5:4-24
Module not found: Error: Can't resolve 'web-vitals' in '/Users/username/Desktop/sample/src'

webpack compiled with 1 error
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.
```

エラーが２つあるようです。
①Web-vitalsというモジュールがありません。
②babel-preset-react-appの依存関係が適切ではありません。これはcreate-react-app プロジェクトの一部ですがもうメンテナンスされていません。このバグが修正される可能性はないので、devDependenciesに@babel/plugin-proposal-private-property-in-objectを追加して、エラーメッセージを消しましょう。


①
Web-vitalsをインストールします。
```
$ npm install web-vitals
```

②
babel-preset-react-app の問題を回避します。
```
npm install --save-dev @babel/plugin-proposal-private-property-in-object
```

これで、今度こそ実行…！
```
$ yarn start
```

無事に新規Reactがブラウザで立ち上がりました！
![スクリーンショット 0007-01-27 10.56.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3995314/5cb352a7-2e55-6789-aa51-04b3df6f2391.png)

※何か間違いもございましたら、ご指摘ください！