vue3: i18n plugin won't find localization in json file - vue.js

Question

I am trying to setup a vue3 app with i18n localization. The localization is supposed to be located in json files. I added i18n via vue add i18n to my project. The questions asked during installation were all answered with the default value except the one with the legacy support (my answer: no). When i try to use a text from a json file, it will tell me in the console [intlify] Not found 'message' key in 'en' locale messages.
The local translations work just fine.
And i have no clue why it is not working with the translations provided in the JSON file.
Here is my code:
packages.json
{
"name": "optinity-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.3",
"#fortawesome/free-regular-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/vue-fontawesome": "^3.0.0-4",
"#kyvg/vue3-notification": "^2.3.1",
"#microsoft/signalr": "^5.0.6",
"axios": "^0.21.1",
"babel-plugin-transform-decorators": "^6.24.1",
"bulma": "^0.9.2",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0",
"vue-i18n": "^9.1.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0",
"vuex-module-decorators": "^1.0.1"
},
"devDependencies": {
"#intlify/vue-i18n-loader": "^2.1.0",
"#types/jest": "^24.0.19",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-typescript": "~4.5.0",
"#vue/cli-plugin-unit-jest": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"#vue/test-utils": "^2.0.0-0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typescript": "~4.1.5",
"vue-cli-plugin-i18n": "~2.1.1",
"vue-jest": "^5.0.0-0"
}
}
i18n.ts
import { createI18n, LocaleMessages, VueMessageType } from 'vue-i18n'
/**
* Load locale messages
*
* The loaded `JSON` locale messages is pre-compiled by `#intlify/vue-i18n-loader`, which is integrated into `vue-cli-plugin-i18n`.
* See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
*/
function loadLocaleMessages(): LocaleMessages<VueMessageType> {
const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
const messages: LocaleMessages<VueMessageType> = {}
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)
}
})
return messages
}
export default createI18n({
legacy: false,
locale: process.env.VUE_APP_I18N_LOCALE || 'en',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: loadLocaleMessages()
})
main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import i18n from './i18n'
const app = createApp(App).use(i18n).use(store).use(router)
app.mount('#app');
vue.config.js
module.exports = {
// ... your other options
transpileDependencies: [
'vuex-module-decorators'
],
pluginOptions: {
i18n: {
locale: 'en',
fallbackLocale: 'en',
localeDir: 'locales',
enableLegacy: false,
runtimeOnly: false,
compositionOnly: false,
fullInstall: true
}
}
}
en.json
{
"message": "hello i18n !!"
}
and finally
HelloI18n.vue
<template>
<p>{{ t('message') }}</p>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'
export default defineComponent({
name: 'HelloI18n',
setup() {
const { t } = useI18n({
inheritLocale: true,
useScope: 'global'
})
// Something todo ..
return { t }
}
})
</script>
<i18n>
{
"en": {
"hello": "Hello i18n in SFC!"
}
}
</i18n>
If i switch the scope in my HelloI18n.vue to local i can use the transaltions provided in the <i18n> tag.
I already added a console log in my i18n.ts file in order to check if the file is being found, which is the case.
I have no clue why this is not working. Does anyone have any ideas or can point me in the right direction?

Answer 1

The main probles is that the function in i18n.ts doing loadLocalMessages is not getting properly the files from the locales folder.
function loadLocaleMessages (): LocaleMessages<VueMessageType> {
const locales = require.context(
'./locales',
true,
/[A-Za-z0-9-_,\s]+\.json$/i
)
const messages: LocaleMessages<VueMessageType> = {}
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
}
I have added locales(key).default with that you get the values that are getted from the files.