Building a react app Extension that is being deployed to SAP WEB Client. But the translations are not working. It works properly on dev mode but fails on production

This is the error:

Index.js:

import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
import parse from "@ui5/webcomponents-base/dist/PropertiesFileFormat.js";
["en", "fr", "de", "es"].forEach((localeToRegister) => {
  registerI18nLoader("i18n-template", localeToRegister, async (localeId) => {
    const devUrl = `/locales/messagebundle_${localeId}.properties`;
    const baseUrl = `/locales/messagebundle_${localeId}.properties`;
    let url;
    if (process.env.NODE_ENV === 'development') {
      url = devUrl;
    } else {
      url = baseUrl;
    }

    try {
      const response = await fetch(url);
      const props = await response.text();
      return parse(props);
    } catch (error) {
      console.error(`Error loading properties file for locale ${localeId}:`, error);
      return null; 
    }
  });
});

folder Structure:

I tried to change the paths and structure it failed.
my expectations are the translations to work on production.