Serving translation files in S3 ➡️ getting i18next::translator: missingKey even though namespace file loaded correctly

[gabriellamichelle]

I am trying to use S3 bucket (accessed through CDN) to serve our translation files.
It seems like the library is able to download the files correctly (loaded correctly based on Network tab and console log), however it is still saying that the key for the translation is missing. The page is only showing the keys as well at the moment.
Would you be able to help me on this? 🙇 Thank you!!

Package version:

"next-i18next": "7.0.1",

i18n.js configuration

const nextI18NextInstance = new NextI18Next({
  use: [I18NextHttpBackend],
  defaultNS: 'common',
  defaultLanguage,
  fallbackLng: defaultLanguage,
  // localePath: path.resolve('static/locales'),
  localePath: CDN_DOMAIN,
  otherLanguages: languageKeys.filter((x) => x !== defaultLanguage),
  detection: {
    lookupQuerystring: lookupKey,
    lookupCookie: CookieTypes.LOCALE.name,
    order: ['querystring', 'cookie', 'header'],
    cookieDomain: COOKIE_DOMAIN,
    cookieMinutes: 20160,
  },
  backend: {
    loadPath: (lng, ns) => {
      const url = `${CDN_DOMAIN}/${lng}/${ns}.json`;
      console.log('Translation URL ', url, ns);
      return url;
    },
    crossDomain: true
  },
  debug: true
})
const i18nRef = nextI18NextInstance.i18n

Console log:

i18next: initialized **see initializedObject below**
I18n.js:74 Translation URL  https://**cdn path**/en/common.json ['common']
i18next.js:22 i18next::backendConnector: loaded namespace common for language en {page: {title: "some value", description: "some value"}, nav: {…}, …}
i18next.js:22 i18next: languageChanged en
i18next.js:22 i18next::translator: missingKey en common page.title page.title
i18next.js:22 i18next::translator: missingKey en common page.description page.description

initializedObject

{
    "debug": true,
    "initImmediate": true,
    "ns": ["common", "notifications", "error"],
    "defaultNS": "common",
    "fallbackLng": ["en"],
    "fallbackNS": false,
    "whitelist": ["de","ko","en","cimode"],
    "nonExplicitWhitelist": false,
    "supportedLngs": ["de","ko","en","cimode"],
    "nonExplicitSupportedLngs": false,
    "load": "currentOnly",
    "preload": false,
    "simplifyPluralSuffix": true,
    "keySeparator": ".",
    "nsSeparator": ":",
    "pluralSeparator": "_",
    "contextSeparator": "_",
    "partialBundledLanguages": false,
    "missingKeyHandler": false,
    "missingInterpolationHandler": false,
    "postProcess": false,
    "postProcessPassResolved": false,
    "interpolation": {"escapeValue": false, "formatSeparator": ","},
    "defaultLanguage": "en",
    "otherLanguages": ["de","ko"],
    "localePath": "https://xxx", // cdn path value
    "localeStructure": "{{lng}}/{{ns}}",
    "localeExtension": "json",
    "localeSubpaths": {},
    "use": [null],
    "browserLanguageDetection": true,
    "serverLanguageDetection": true,
    "customDetectors": [],
    "detection": {
        "caches": ["cookie"],
        "cookieSameSite": "strict",
        "lookupCookie": "locale",
        "order": ["querystring","cookie","header"],
        "lookupQuerystring": "locale",
        "cookieDomain": "yyy", // cookie domain
        "cookieMinutes": 20160,
        "lookupLocalStorage": "i18nextLng",
        "excludeCacheFor": ["cimode"]
    },
    "react": {"wait": true, "useSuspense": false},
    "strictMode": true,
    "errorStackTraceLimit": 0,
    "shallowRender": false,
    "backend": {
        "crossDomain": true,
        "addPath": "/locales/add/{{lng}}/{{ns}}",
        "allowMultiLoading": false,
        "reloadInterval": false,
        "customHeaders": {},
        "queryStringParams": {},
        "withCredentials": false,
        "overrideMimeType": false,
        "requestOptions": {
            "mode": "cors",
            "credentials": "same-origin",
            "cache": "default"
        }
    },
    "allLanguages": ["de","ko","en"],
   ...
}

[gabriellamichelle]

Update:

After debugging, it seems that in the original code using file system, react-i18next's useSSR gets the listed namespacesRequired and have it loaded already, however when changing it to using s3 path with i18next-http-backend, the same step returns the listed namespacesRequired but with empty objects.
e.g.

{
  en: {
    common: {},
    error: {},
  }
}

May I know if I have missed any step?