整理券アプリを作る（環境構築編）

いきなりのエラー

npx create-react-app react-app --template typescript

でフォルダを作成しようとしたところ、以下のようなエラーが出た。

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: react-app@0.1.0
npm ERR! Found: react@19.0.0
npm ERR! node_modules/react
npm ERR!   react@"^19.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR! node_modules/@testing-library/react
npm ERR!   @testing-library/react@"^13.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/himegitaichi/.npm/_logs/2024-12-21T05_02_40_858Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/himegitaichi/.npm/_logs/2024-12-21T05_02_40_858Z-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 @types/jest@^27.0.1 @types/node@^16.7.13 @types/react@^18.0.0 @types/react-dom@^18.0.0 typescript@^4.4.2 web-vitals@^2.1.0` failed

どうやら @testing-library/react@13.4.0と@testing-library/react@"^13.0.0がreactのバージョン18を求めているみたい。だけどフォルダを作成するときに自動的にバージョン19をインストールするっぽい。

対応策

とりあえず作ったものは仕方がないので

npm install react@18 react-dom@18

でバージョンを下げた。
がしかし、まだ競合はあったがとりあえずnpm startを実行
するとlocalhost:3000とともにエラー文がサイト上に出た。

Compiled with problems:

ERROR in ./src/index.tsx 7:0-24
Module not found: Error: Can't resolve './App' in '~/react-app/src'
ERROR in ./src/index.tsx 8:0-48
Module not found: Error: Can't resolve './reportWebVitals' in '~/react-app/src'

うん、index.tsxで./Appと./reportWebVitalsが解決できない？
とりあえずindex.tsxを見てみる。

import App from './App';
import reportWebVitals from './reportWebVitals';

一旦拡張子入れてみるか...

#変更後
import App from './App.tsx';
import reportWebVitals from './reportWebVitals.ts';

お！エラーが消えた！
けども次のエラーが出た。

ERROR in ./src/reportWebVitals.ts 5:4-24
Module not found: Error: Can't resolve 'web-vitals' in '~/react-app/src'

次はreportWebVitals.tsを見てみよう。

import { ReportHandler } from 'web-vitals';

今度はweb-vitalsというモジュールがないみたい。なので

npm install web-vitals

でインストール...

エラー消えた！！
だけどそれはサイト上での話。VScode上ではまだエラーが...
とりあえず今回はこれでいいだろう。
そもそもなぜnpx create-react-appでエラーが出るのだろう？
そこが一発でいけるといいのだが...