Translation in JavaScript file doesn't work [closed]

Question

I am using Drupal 9 and Laravel-mix for the front end setup.

In my JS file I tried to translate the sting with Drupal.t('the string');

The string can't be found in the Translate UI if I use yarn build. It's working properly when use yarn watch.

In the generated JS (after yarn build) Drupal.t('the string'); is converted to a=t.t('the string'); and I gueess that's why Drupal can't translate the string.

Any idea how can be resovled this issue?

package.json file

  "scripts": {
    "watch": "npm run development -- --watch",
    "build": "npm run production",
    "development": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=webpack.config.js",
    "production": "cross-env NODE_ENV=production webpack --no-progress --hide-modules --config=webpack.config.js"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.4.1",
    "cross-env": "^7.0.3",
    "laravel-mix": "^5.0.5",
    "resolve-url-loader": "^3.1.0",
    "sass": "1.32.13",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.14"
  },
  "dependencies": {
    "slick-carousel": "^1.8.1",
    "sticky-sidebar": "^3.3.1",
    "webpack": "^5.73.0"
  }

webpack.config.js file

const mix = require("laravel-mix/src/index")
const ComponentFactory = require("laravel-mix/src/components/ComponentFactory")
new ComponentFactory().installAll()
require(Mix.paths.mix())
Mix.dispatch("init", Mix)
const WebpackConfig = require("laravel-mix/src/builder/WebpackConfig")
module.exports = new WebpackConfig().build()