Bug Report: loadUrl in ChainedBackend Calls Twice

[rahulsharmaf81]

=> Use ChainedBackend with multiple backends configured.
=> Initialize i18n with use(initReactI18next).use(ChainedBackend).init({...}).
*Observe that loadUrl(url, callback) is triggered twice for the same resource.

Expected Behavior
loadUrl should be called only once per resource.

Actual Behavior
loadUrl gets called twice for the same localization file.
This results in multiple API calls to fetch the same translations, causing redundant network requests.

code - const [i18completed, setI18completed] = useState(false);
const [initialized, setInitialized] = useState(false);
const backendConfig = getBackendConfig(selectedSetupUrl, selectedEnv, getFromSession);
import Fetch from 'i18next-fetch-backend';
import { getDynamicLoadPath, i18nextOptions } from '../../i18nextOptions';
import { getDomainFromUrl } from '@/utils/getDomainFromUrl';

const getBackendConfig = (
selectedSetupUrl: string,
selectedEnv: string,
getFromSession: { locale: string },
) => {
const locale = getFromSession?.locale || 'en_US'; // Default to 'en_US' if no locale is provided
const domain = getDomainFromUrl(selectedSetupUrl); // Get the domain from the URL

// First backend (dynamic based on the URL and environment)
const dynamicBackend = {
loadPath: getDynamicLoadPath(domain, locale, selectedEnv),
crossDomain: true,
};

// Second backend: i18nextOptions (already defined in your i18nextBackend.js)
const staticBackend = i18nextOptions;

return {
backends: [Fetch, Fetch], // Use two Fetch instances or any other backends you prefer
backendOptions: [dynamicBackend, staticBackend], // The dynamic config and static i18nextOptions
};
};
export default getBackendConfig;

if (!i18completed && !initialized) {
setInitialized(true);
i18n
.use(initReactI18next)
.use(ChainedBackend)
.init({
backend: {
backends: backendConfig.backends, // Multiple backends
backendOptions: backendConfig.backendOptions,
},
fallbackLng: 'en_US',
lng: getFromSession?.locale || 'en_US',
preload: ['en_US'],
debug: true,
react: {
useSuspense: false,
},
detection: {
order: [
'querystring',
'cookie',
'localStorage',
'navigator',
'htmlTag',
'path',
'subdomain',
],
caches: ['localStorage', 'cookie'],
},
interpolation: {
escapeValue: false,
},
})
.then(() => {
setI18completed(true);
});
}
version - "i18next": "^23.11.5",

[adrai]

I'm not able to reproduce your issue.
Please provide a minimal reproducible example repository, and not just unformatted code snippets.

For example, try to use this example and update it like this:

[VKZycus]

Hi @adrai unfortunately we cant share project file please find below structured snippet.

i18n
.use(initReactI18next)
.use(ChainedBackend)
.init({
backend: {
backends: backendConfig.backends,
backendOptions: backendConfig.backendOptions,
},
fallbackLng: 'en_US',
lng: getFromSession?.locale || 'en_US',
preload: ['en_US'],
debug: true,
react: {
useSuspense: false,
},
detection: {
order: [
'querystring',
'cookie',
'localStorage',
'navigator',
'htmlTag',
'path',
'subdomain',
],
caches: ['localStorage', 'cookie'],
},
interpolation: {
escapeValue: false,
},
})
}

where

const dynamicBackend = {
loadPath: getDynamicLoadPath(domain, locale, selectedEnv),
crossDomain: true,
};

const i18nextOptions = {
loadPath: '/assets/i18n/{{lng}}.json',
requestOptions: {
mode: 'cors',
credentials: 'same-origin',
cache: 'default',
},
crossDomain: true,
};

Please let us know what we are doing wrong here. we see two apicalls in network.

Thanks.

[adrai]

Your snippets do not help to investigate...
Try to recreate a minimal reproducible example that shows your issue. Can't help without that, sorry.

[adrai]

Also, please provide your i18next debug output.