Node.js用のdeepl-nodeライブラリを使ってReactの翻訳アプリを作る方法

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

【質問の主旨】

現在、DeepL API公式ライブラリのdeepl-nodeを使って翻訳アプリを作りたいと考えています。

フロントエンドで翻訳できる言語の表示と翻訳前・翻訳後の文章の表示、バックエンドで翻訳できる言語一覧のデータや翻訳後の文章データを取得するつもりです。

こちらの手順でフロントエンドの実装をある程度進めて、DeepLの公式ライブラリであるdeepl-nodeをインストールし、package.jsonで"type": "module"という記述を追加すると、それまで正常に動いていたフロントエンド用のローカル開発環境に以下のエラーが表示されます。

エラーが発生したときの作業内容はこちらのGitHubのcommitで確認できます。

【質問の補足】

1. 参考にしているアプリ

DeepL APIを使用した翻訳アプリを作成するにあたって、以前、自分が作成した翻訳アプリを参考にしています。こちらのアプリは翻訳できる言語の一覧や翻訳後の文章データをRapid APIのG Translateを使用しています。

2. 翻訳アプリの全体コード

【質問の主旨】で紹介した作りかけの翻訳アプリの全体コードは、GitHubのレポジトリで公開しています

3. deepl-node ライブラリを使う理由

deepl-node ライブラリが公式ライブラリであるからです。DeepLは公式ドキュメントで、deepl-node以外にもDeepL APIにアクセスするための公式ライブラリをいくつか表示しています。ですがNode.js（JavaScript）だけが唯一、自分が理解できる言語で他のプログラミング言語は分かりません。

4. 関連質問

先日、今回の質問と関連する質問を投稿しました。そのときはdeepl-nodeライブラリはNode.js用であり、サーバーで使用することは理解できました。よってそのときはserever.jsだけを使って言語一覧のデータだけを表示させる単純なアプリで「完成」としました。

ですが今回はReactを使って、フロントエンドの画面をある程度整えたアプリにしたいと考えています。

deepl-nodeの影響をバックエンドだけにして、フロントエンドにはその影響が及ばないようにする方法はあるのでしょうか？

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

hoshi-takanori

2023/10/22 10:59

G Translate を使ったアプリの server.js の /translation の処理で G Translate の API を叩いてる部分を、deepl-node の呼び出しに変えるだけでは…。

echizeyayota

2023/10/23 03:44

hoshi-takanori さん。コメントありがとうございます。 > G Translate を使ったアプリの server.js の /translation の処理で G Translate の API を叩いてる部分を、deepl-node の呼び出しに変えるだけでは…。 G Translate の API を叩いてる部分を、deepl-node の呼び出しに変えると、このエラーはそのうちなくなるので、途中でこのエラーが表示されても気にしなくても良いということでしょうか？

hoshi-takanori

2023/10/23 04:01

ごめんなさい、ちゃんとエラーメッセージ見てなかったです。このエラーは、React というか create-react-app で使用している react-scripts ってやつが "type": "module" に対応してないために起こるようです。つまり、"type": "module" を指定するとフロントエンドが動かなくなり、指定しないとバックエンドで deepl-node が使えないってことになるのかな。解決方法は、フロントエンドとバックエンドを別々のディレクトリにして、別々の package.json を使うようにすることかと…。

echizeyayota

2023/10/23 07:41

hoshi-takanori さん。コメントありがとうございます。フロントエンドとバックエンドを別々のディレクトリにして作り直してみます。