i18n falls back to translate but key actually exists

vue & vue-i18n version

Vue 2.0.8 Vue-i18n 4.7.2 Chrome 54, IE11, Firefox 49

Steps to reproduce

I’ll reproduce on request (if I can manage, seems like an odd bug).

What is Expected?

No warnings

What is actually happening?

A single $t() is not being translated but goes to fall back language instead.

More info: I load multiple json files eg nl-NL.json and en-US.json with a bunch of strings for the entire website. This works perfectly expect for 1 single instance. When I put the language on nl-NL, it will always fallback to en-US for this one string (always the same). The rest of the website is correctly translated. Both json files contain the correct key value.

Getting the following warning when this happens:

vue-i18n.common.js?2c49:26 [vue-i18n] Fall back to translate the keypath "infobar_start_season" with "en-US" language.

The template is (originally in Jade/Pug):

    div(v-if='!open')
      p(v-if='isSeasonOver') {{ $t('infobar_start_season', season.startMonth, season.startDay) }}
      p(v-else) {{ $t('infobar_open_nextday') }}

or converted to HTML:

<div v-if="!open">
  <p v-if="isSeasonOver">{{ $t('infobar_start_season', season.startMonth, season.startDay) }}</p>
  <p v-else="v-else">{{ $t('infobar_open_nextday') }}</p>
</div>

And the en-US string inside the json is:

  "infobar_start_season": "Our season will start on {0} {1}",

The nl-NL one is the same except different language.

[Christilut]

I honoustly don’t know how to reproduce this. I can send you my project. Could you send me a mail at [omitted] or let me know what your preferred way to get the project is.

[Leslie-Wong-H]

Using en and zh would cause the warning, while “en-US” and “zh-CN” wouldn’t.

vue-i18n: “^8.27.1”

/**
 * Get the browser language
 */
export const browserLang = (() => {
  const supports = ["en", "zh"];
  const langs = {
    zh: "zh-CN",
    en: "en-US",
  };
  const userLang = window.navigator.language || window.navigator.userLanguage;
  let lang = supports[0];
  if (userLang) {
    const useLang = userLang.trim().slice(0, 2);
    if (useLang in langs) {
      lang = useLang;
    }
  }
  return langs[lang];
})();

const i18n = new VueI18n({
  locale: browserLang,
  // Using en and zh would cause the warning, while "en-US" and "zh-CN" wouldn't.
  // messages: { en: translationEN, zh: translationCN },
  messages: { "en-US": translationEN, "zh-CN": translationCN },
});