Reactのプロジェクトをdeepl-nodeを使って英文を翻訳をしたいがエラーが出る

Question

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

【質問の主旨】

Reactのプロジェクト内にとDeepL APIを呼び出すdeepl-nodeのライブラリを使用して英文を和文に翻訳したいと考えています。

ところがReactのApp.jsで、deepl-nodeのUsageに従って下記のような記述をするとエラーが表示されます。

import * as deepl from 'deepl-node';

const App = () => {
  const authKey = ""; // Replace with your key
  const translator = new deepl.Translator(authKey);

  (async () => {
      const result = await translator.translateText('Hello', null, 'ja');
      console.log(result.text); // こんにちは
  })();

  return (
    <div className="app">

    </div>
  );
}

export default App;

エラーを消してDeepLによって翻訳された文章をコンソールで表示するためには、コードをどのように修正すれば良いでしょうか？

【質問の主旨】

1. 全体のコードと手順について

App.jsを含む全体のコードと手順についてはGitHubで公開しています。

2. API Keyについて

公開しているコードと上記のApp.jsではAPI Keyを代入すべき変数authKeyは空にしています。ですが DeepL APIの認証キーはすでに取得済みで、ローカル開発環境の中では取得済みのキーの値を代入していて、それでもなおエラーが表示されます。

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

Comments

[hoshi-takanori]

Official Node.js Client Library for the DeepL API ってことなので、node.js (サーバー) 用なのでは。
React (というか、ブラウザ) で動かすと api key を秘密にできませんし…。

[echizeyayota]

hoshi-takanori さん。

> Official Node.js Client Library for the DeepL API ってことなので、node.js (サーバー) 用なのでは。

コメントありがとうございます。Node.jsで動くようにコードを作成しました。
今後ともどうぞよろしくお願いします。

Answer 1

いただいたアドバイスに基づいてサーバー（node.js）上で記述すると翻訳ができるようになりました。自分で作成したserver.jsの内容は以下の通りです。

import { createRequire } from 'module';
const require = createRequire(import.meta.url);

import * as deepl from 'deepl-node';

const PORT = 8000;
const axios = require("axios").default;
const express = require("express");
const cors = require("cors");
require("dotenv").config();

const app = express();

app.use(cors());

app.listen(PORT, () => console.log("Server running on PORT" + PORT));

const authKey = process.env.deepl_api_key; // Replace with your key
const translator = new deepl.Translator(authKey);

(async () => {
  const result = await translator.translateText('good evening', null, 'ja');
  console.log(result.text); // こんばんは
})(); 

なおserver.js 以外のファイル構成についてはGitHubで公開しています。