Udemy講座をする際に、create-react-appでreactの開発環境を作成したらエラーが起こりました。

react@19.0.0がインストールされているのに、@testing-library/reactがreact@^18.0.0を必要としているためエラーが出たようでした。

解決方法

この記事が参考になりました！

この記事の内容の通り進めると、依存関係のエラーは解決できました。

依存関係のエラーを解決し、さらに講座を進めていくと、今度はaxiosを使ってデータを取得する必要があり、その際にまたエラーが起こりました。

型定義のエラーが起こっています。

これも、先ほど参考で紹介した記事にもある通りですが、カスタムの型定義ファイルに追記することで解決できました。

src/custom.d.ts

declare module "axios";

型定義のエラーは解決しましたが、ローカル環境ではエラーが出ています。
Module not found: Error: Can't resolve 'axios'

npm install axiosでaxiosをinstallします。

しかし、installするとまたエラーが出ました。

このエラーは、react-scripts@5.0.1がtypescriptの特定バージョンを期待している一方で、現在のプロジェクトには互換性のないtypescript@5.7.2がインストールされているために発生しています。

npm install typescript@4.9.5をインストールし、typeScriptのバージョンを下げました。

すると、無事にnpm install axiosが通りました！

fetchも成功しています。

やっと講座の内容を進められるようになりました！

ちなみにcreate-react-appは3年ほど更新が停止しており、非推奨であり、今はViteを使ったインストールが主流になってきているようです。

今回はUdemy講座を進める目的だったのでcreate-react-appを使用しましたが、あくまでも個人学習の範囲で使用するのが良さそうです！