Udemy講座をする際に、create-react-appでreactの開発環境を作成したらエラーが起こりました。
依存関係の競合のためエラーが発生
react@19.0.0がインストールされているのに、@testing-library/reactがreact@^18.0.0を必要としているためエラーが出たようでした。
解決方法
この記事が参考になりました！
この記事の内容の通り進めると、依存関係のエラーは解決できました。
axiosのエラーが出る
依存関係のエラーを解決し、さらに講座を進めていくと、今度はaxiosを使ってデータを取得する必要があり、その際にまたエラーが起こりました。
型定義のエラーが起こっています。
これも、先ほど参考で紹介した記事にもある通りですが、カスタムの型定義ファイルに追記することで解決できました。
declare module "axios";
axiosパッケージがインストールされていないエラー
型定義のエラーは解決しましたが、ローカル環境ではエラーが出ています。
Module not found: Error: Can't resolve 'axios'
npm install axiosでaxiosをinstallします。
互換性のないtypescriptのバージョンがインストールされているためにエラーが発生
しかし、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を使用しましたが、あくまでも個人学習の範囲で使用するのが良さそうです！