Interpolation not working in ICU format when fetching an endpoint

[paolapog]

🐛 Bug Report

Hello everyone, we were trying to pass some data for this json:
{"delete_board_modal_title" : "Delete {title}"}

in this way :

  <Trans
    i18nKey="delete_board_modal_title"
    values={{ title: boardTitle }}
  />

//or like this

{t("delete_board_modal_title", { title: boardTitle })}

but it seems to not interpolate correctly the curly brace because I see this result Delete {title}.
The weirdest thing is that if we use a local folder public/locales/en_US.json is working correctly but not when is fetching from this endpoint: https://ourBeautifulEndpoint.com/v2/en_US.json.
Or it also works like this:
<Trans i18nKey="Delete {title}" values={{ title: boardTitle }} />
or it works with the double curly braces but it's not what we want because we need ICU format.
Maybe we are missing something important for sure, what should we do?

This is the I18next config:

import i18next from "i18next";
import HttpApi from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";
import ICU from "i18next-icu";
import { initReactI18next } from "react-i18next";

const backendOptions = {
  type: "backend",
  allowMultiLoading: true,
  loadPath: "https://ourBeautifulEndpoint.com/v2/{{lng}}.json"
};

i18next
  .use(ICU)
  .use(HttpApi)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    backend: backendOptions,
    whitelist: ["en_US", "it_IT"],
    detection: {
      order: ["path", "cookie", "localStorage", "sessionStorage"],
      lookupQuerystring: "lng",
      lookupCookie: "i18next",
      lookupLocalStorage: "i18nextLng",
      lookupSessionStorage: "i18nextLng",
      caches: ["localStorage", "cookie"]
    },
    keySeparator: true,

    debug: true,

    react: {
      useSuspense: false,
      bindI18n: "languageChanged"
    }
  });

export default i18next;

Environment

• runtime version: node v14.19.1
• i18next version: {
  "i18next": "^21.8.9",
  "i18next-browser-languagedetector": "^6.1.4",
  "i18next-http-backend": "^1.4.1",
  "i18next-icu": "^2.0.3"
  }
• os: Mac chip m1 macOs Monterey

Thanks in advice and sorry if this is not a bug or it is duplicated

[adrai]

This should work without problems. There should be no influence based on the origin of the translation resources.
Is there any information/warning in the developer console? Or can you create a reproducible codesandbox example?

[paolapog]

@adrai Thanks for the reply! No, there is no warning, unfortunately.
I provided you a codesandbox with a fake api: https://codesandbox.io/s/tender-pike-k8h87u?file=/src/App.js
Let me know if you can access to it

[adrai]

Sorry, but I need to see the http response, if it is a correct json. I suspect there is an issue in the http response body.

[paolapog]

I cannot provide you the real endpoint, but I replicate it as real as I could and you can find it in that codesandbox.
Our http response returns a 200 status with the correct JSON. Indeed, in the console we have i18next::backendConnector: loaded namespace translation for language en_US

[adrai]

Just saw, you're not using suspense.
So please check for the ready flag: https://react.i18next.com/latest/usetranslation-hook#not-using-suspense

[adrai]

Another thing you could check is, the used language code format: https://www.i18next.com/how-to/faq#how-should-the-language-codes-be-formatted

Try en-US instead of en_US

[paolapog]

I've just used Suspense but it's not working. If there was a problem with a "ready state", nothing would have loaded, not even the "Delete" part.
BUT, with the other format, it works 👍🏼 🎉 it's weird because we used the same format in our public folder and it worked but with an endpoint to fetch, nope. What it could be?
Thanks btw 🚀

[adrai]

Did you try to use en-US and not en-US?
intl-messageformat uses BCP 47 language tags: https://formatjs.io/docs/intl-messageformat#intlmessageformat-constructor

[adrai]

fyi: https://codesandbox.io/s/elastic-panini-e9skel?file=/src/i18next.js

[paolapog]

Yes, as I said before: with the other format, it works 👍🏼 I was just curious about the explanation, but you gave to me with the intl message format constructor. Thanks again! We can close this pr

[the-line]

I also have this problem. Using the language codes "en", "de" and "nl". As soon as I remove the .use(ICU) line, interpolation is working again. There seems to be some problem with interpolation and ICU.

[adrai]

I also have this problem. Using the language codes "en", "de" and "nl". As soon as I remove the .use(ICU) line, interpolation is working again. There seems to be some problem with interpolation and ICU.

please create a reproducible example and open a new issue

[the-line]

I will do that if I'm able to make a reproducible example. 👍