【React】APIを叩くとModule not found: Error Can't resoleve ‘path’ in というエラーが表示される

いつもお世話になっております。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

【質問の主旨】

Reactを使って https://rapidapi.com/datascraper/api/g-translate1/ のAPIエンドポイントから、Google翻訳が翻訳できる言語一覧のオブジェクトを取得したいと考えています。

言語一覧を取得するために、App.jsを使って主に下記のコードを記述しました。

const getLanguages = async () => { const options = { method: 'GET', url: 'https://g-translate1.p.rapidapi.com/languages', headers: { 'X-RapidAPI-Host': process.env.RAPID_API_HOST, 'X-RapidAPI-Key': process.env.RAPID_API_KEY, } }; try { const response = await axios.request(options); console.log(response.data); setLanguages(response.data); } catch (error) { console.error(error); } } useEffect(() => { getLanguages(); }, []);

ですがこの記述でローカルサーバーをリロードすると下記のようなエラーが表示されます。

このエラーを表示させず、こちらの動画の46:34で表示されているように、言語一覧を取得するためにはどうすれば良いでしょうか？

【質問の補足】

1. APIエンドポイントについて

APIの記述はRapid API内のG Translate というページを参考にしています。

2. プロジェクトと各ファイルの詳細について

プロジェクト全体
https://github.com/echizenyayota/google-translate-clone20230920/tree/developer

App.js
https://github.com/echizenyayota/google-translate-clone20230920/blob/developer/src/App.js

3. .envファイルについて

APIにアクセスするためのキーは、App.jsから.envファイルから呼び出すようようにしています。

const options = { method: 'GET', url: 'https://g-translate1.p.rapidapi.com/languages', headers: { 'X-RapidAPI-Host': process.env.RAPID_API_HOST, 'X-RapidAPI-Key': process.env.RAPID_API_KEY, } };

そのためdotenvパッケージをインストールして、App.jsの7行目でdotenvパッケージを呼び出すようにしています。

なお、.envは外部から見られないよう.gitignore上で列挙しているため、上記のGitHubのレポジトリ内には反映されていません。代わりに.env.sampleという名前のファイルを置いて、「こんな感じで書いています」という記録を残しています。

ローカルサーバーのプロジェクトにある.envには、G Translateに記載されているAPIのホスト名と個別のキー名をコピペしています。

—

以上、ご確認をよろしくお願いします。