Missing message: "app.homepage.title" for locale: "it", using default message as fallback

Question

I have react-intl set up on my webpage and I have verified that my intl prop contains the following:

{
    locale: 'it',
    messages: {
        it: {
            app.homepage.title: 'Casa'
        }
    }
}

Yes I get the error message:

[React Intl] Missing message: "app.homepage.title" for locale: "it", using default message as fallback.

I'm not sure what I'm doing wrong. I am using intl in the following way:

const title = intl.formatMessage({
  id: "app.homepage.title",
  defaultMessage: "Home"
});

Importing the messages

I am loading the messages from a locally-stored json file like so:

import Italian from "app/translations/it.json";
import locale_en from "react-intl/locale-data/en";
import locale_it from "react-intl/locale-data/it";

addLocaleData([...locale_en, ...locale_it]);

const loadTranslation = () => {
  const urlParams = new URLSearchParams(window.location.search);
  const locale = urlParams.has("locale")
    ? urlParams.get("locale")
    : navigator.language;
  const messages = {
    it: Italian,
    en: null
  };

  return { locale, messages };
};

const { locale, messages } = loadTranslation();

...

<IntlProvider locale={locale} messages={messages}>
    <Provider store={store}>
      <App />
    </Provider>
</IntlProvider>

My translation file contains the following:

{
  "app.signup": "Iscriviti",
  "app.login": "Accesso",
  "app.homepage.title": "Casa"
}

@SergioEscudero I am loading them from a json file containing id, string pairs. — K G, Nov 20 '18 at 23:31
When you are saying you are loading them from a json, is that from a server or from your local files? — Sergio Escudero, Nov 20 '18 at 23:34
@SergioEscudero definitely a `json` file. I could post the code? — K G, Nov 20 '18 at 23:37
It would be great, even if you can add how you are importing the file and set it up to the provider will be awesome — Sergio Escudero, Nov 20 '18 at 23:38
Nevermind. I figured it out thanks. I need to return just the italian translation from the `loadTranslations` function. — K G, Nov 20 '18 at 23:50
You can add it to the answer and mark as correct. Thank you! — Sergio Escudero, Nov 20 '18 at 23:51

score 3 · Answer 1 · answered Nov 21 '18 at 00:15

Ok so I figured it out. I need to modify the loadTranslations function like this and it works:

const loadTranslation = () => {
  const urlParams = new URLSearchParams(window.location.search);
  const locale = urlParams.has("locale")
    ? urlParams.get("locale")
    : navigator.language;
  const messages = {
    it: Italian,
    en: null
  };

  return { locale, messages: messages[locale] };
};

Missing message: "app.homepage.title" for locale: "it", using default message as fallback

Importing the messages

1 Answers1