[vue-i18n] Cannot translate the value of keypath 'message'. Use the value of keypath as default.

[saimalibaloch]

This is my en.json:
{
"message": "hello i18n !!"
}

my i18n.ts

import Vue from "vue";
import VueI18n, { LocaleMessages } from "vue-i18n";

Vue.use(VueI18n); //imported and then used here

//this method loads all the json files needed for translations
function loadLocaleMessages(): LocaleMessages {
const locales = require.context("./locales", true, /[A-Za-z0-9-,\s]+.json$/i);
const messages: LocaleMessages = {};
locales.keys().forEach((key) => {
const matched = key.match(/([A-Za-z0-9-]+)./i);
if (matched && matched.length > 1) {
const locale = matched[1];
messages[locale] = locales(key).default;
}
});
return messages;
}

export default new VueI18n({
locale: "en", //change locale here
fallbackLocale: "en",
messages: loadLocaleMessages() //makes json translations available in messages key
});

my main.ts

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import i18n from "./i18n"; //i18n imported here
Vue.config.productionTip = false;
new Vue({
router,
i18n,
render: (h) => h(App)
}).$mount("#app");

Not able to translate using

{{ $t("message") }}

in my component's html

Dont know whats wrong gives me this error:
[vue-i18n] Cannot translate the value of keypath 'message'. Use the value of keypath as default.

[saimalibaloch]

But it works when my loadLocaleMessages is this

function loadLocaleMessages(): LocaleMessages {
const messages = {
en: {
message: "world"
},
fr: {
message: "french world"
}
};

return messages;
}

Why is it not readiing from json files directly

[saimalibaloch]

Solved!!

just replace messages[locale] = locales(key).default;

with

messages[locale] = locales(key)

in i18n.ts file

But why it doesnt work with default idk.

[OlivierArgentieri]

Yes, same issue here,

I had stopped by to find out if anyone else had the problem and give the same answer as you.
after removing .default it's work

[kazupon]

this is vue-cli-plugin-i18n issue.
fixed with intlify/vue-cli-plugin-i18n#183

thanks!

[saimalibaloch]

Cheers 👍