i18n with vite build, remote messages doesn't work

[hjess]

I have multiple (currently 2) translation files, specified in YAML. I want those files to be outside of source control, so they can be changed and deployed without a new build from source. I'm using Vue3 (3.2.31) and vue-i18n (9.1.9), and vite (2.8.5). The files are preloaded using axios and yamlParse.

This works great in dev/hmr mode, but breaks in prod mode, when accessing someVueInstance.$t (I think); the message in the dev console is:

vendor.40da3268.js:4 TypeError: l is not a function
    at $0 (vendor.40da3268.js:41:3687)
    at Ym (vendor.40da3268.js:41:3057)
    at vendor.40da3268.js:45:2739
    at F (vendor.40da3268.js:45:2607)
    at Proxy.P (vendor.40da3268.js:45:2734)
    at Proxy.ae (index.87f71f0d.js:1:4611)
    at Lc (vendor.40da3268.js:4:3884)
    at op.me [as fn] (vendor.40da3268.js:4:24374)
    at op.run (vendor.40da3268.js:1:5090)
    at P (vendor.40da3268.js:4:24652)

The code looks like this:

// main.ts
import { createApp } from 'vue';

import App from '@/App.vue';
import {Net,Urls} from '@/utils/Net';
import {i18nSetup, i18nInstall} from '@/plugins/i18n';
import router from '@/router';
import axios from 'axios';

const app = createApp(App);

app.config.globalProperties.axios = axios;

// fetch list of supported languages
Net.get(Urls.localeConfig())
    .then((data) => {
        // fetch all langage message/translation files
        i18nSetup(data.data)
            .then(() => {
                app.use(i18nInstall());
                app.use(router);
                app.mount('#app');
            });
    });

// i18n.ts
import type { App } from 'vue';
import { createI18n } from 'vue-i18n';
import { parse as yamlParse } from 'yaml';
import { Net, Urls } from '@/utils/Net';

const localeData: any = {
            config: undefined,
            lang: {},
            locale: '',
        };

const i18nSetup = (localeConfig: any) => {
    // fetch all messages files
    localeData.config = localeConfig;
    const setup = Promise.all(Object.keys(localeData.config).map((lang) => {
        const result = Net.get(Urls.locale(lang));

        // yaml parse to convert to a JS object
        result.then((data) => localeData.lang[lang] = yamlParse(data.data));
        return result;
    }));

    setup.catch((err) => console.error('i18nSetup: cannot get locales; error:',err))
    return setup;
}

const i18nInstall = () => {
    const i18n = createI18n({
        fallbackLocale: 'en-US',
        globalInjection: true,
        globalInstall: true,
        legacy: false,
        locale: 'en-US',
        messages: localeData.lang,
    });
    return i18n;
};

export {i18nSetup, localeData, i18nInstall};

Can anyone post a working example? I'm not sure where/who to blame, as this works properly in development (HMR) mode, and there are no obvious issues in loading the messages via axios, prior to instantiating vue-i18n, in prod mode.

Help???

[kazupon]

Just as the vue compiler compiles SFC into javascript code in production mode via the vue-loader and vite plugin, vue-i18n compiles i18n resources such as json and yaml into the following Bundle as javascript code using a bundler-oriented loader/plugin.
https://github.com/intlify/bundle-tools

There are also vue-i18n docs the below, so why vue-i18n needs to be built as javascript code in production.
https://vue-i18n.intlify.dev/guide/advanced/optimization.html#improve-performance-and-reduce-bundle-size-with-runtime-build-only

In your application, you are fetching yaml data via Net.get, but in a production environment, you need to use the pre-compile yaml that is being fetched.

The following example may help you with your application.
https://github.com/intlify/vue-i18n-next/tree/master/examples/backend

[hjess]

@kazupon Thank you so much for responding. To repeat:

My goal is (was) to be able to have 3rd-party translators make changes to our messages files, and for those changes to be available immediately in a production setting, without an application rebuild/redeploy. We chose Yaml as it's a bit more non-technical-user-friendly, but would happily use Json if it made any difference.

However, I think you're telling me that this design won't work as I had hoped; those messages files need some preprocessing before being made available to the createI18n method. Is this correct? It would explain why I'm seeing l is not a function in the dev console, as (I'm guessing, here) each messages file key (whose values are strings in development mode), have values that are functions in production mode. Something like this must be happening in dev mode, as the files are being fetched externally in both dev and production.

It would be so wonderful if there were a simple method to call at runtime, that would transform the strings-based messages data to a format suitable for use by createI18n().

[hjess]

@kazupon -

Here's a much simpler example of what I'm trying to do - if I use Vue2 with no build step, is there a way to use Vue-I18n the same way?

<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n@8"></script>
</head>
<body>
<div id="vueApp"></div>

<script>
    const VueI18n = window.VueI18n;
    if (VueI18n) {
        const i18n = new VueI18n({
            locale: 'en',
            messages: {
                en: {
                    hello: 'Hello there!',
                }
            }
        });
        Vue.use(i18n);
    }
    new Vue({
        template: '<div><p>This is Vue!</p><p>{{welcome}} and {{hello}}</p></div>',
        el: document.querySelector('#vueApp'),
        data: function() {
            return {
                welcome: 'Welcome',
                hello: this.$t('hello'),
            };
        },
    });
</script>

</body>
</html>

I hope to see

This is Vue!

Welcome and hello there!

Instead, the dev console has the message

TypeError: Cannot read properties of undefined (reading '_t')
    at Vue.$t (vue-i18n@8:242:19)
    at Vue.data (vuei18.html:29:29)
    at Vue.mergedInstanceDataFn (vue.js:1240:22)
    at getData (vue.js:4758:19)
    at initData (vue.js:4715:9)
    at initState (vue.js:4654:7)
    at Vue._init (vue.js:5014:7)
    at new Vue (vue.js:5092:10)
    at vuei18.html:23:5

Am I completely out of luck, or is there a way to make this happen?

Thanks for any help.