用户需要并在同一文件中导入 react js chrome 扩展

Question

我正在使用 reactjs 开发一个 google chrome 扩展，我需要在我的 chrome 扩展中使用

translate

模块或包，但我没有使用它，并且我面临错误切换需要命令导入以继续前进。

我也尝试过这个solution 但它对我不起作用。请看看是否有人可以帮助我摆脱它。谢谢

package.json：

{
  "name": "medium-extension",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack/webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "free-translate": "^0.6.1",
    "google-translate-api": "^2.3.0",
    "openai": "^3.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "translate": "^2.0.2"
  },
  "type": "module",
  "devDependencies": {
    "@babel/core": "^7.20.12",
    "@babel/preset-env": "^7.20.2",
    "@types/chrome": "0.0.177",
    "@types/google-translate-api": "^2.3.2",
    "babel-loader": "^9.1.2",
    "copy-webpack-plugin": "^10.2.4",
    "css-loader": "^6.7.3",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.5",
    "webpack": "^5.75.0",
    "webpack-cli": "^4.9.1"
  }
}

background.ts：

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

const translate = require('free-translate');

(async () => {
     const translatedText = await translate('This is cool!', { to: 'ja' });
  
     console.log(translatedText); // これはカッコいい！
})();

如何在同一个文件中使用 import 和 require - Node JS