Error: Unknown variable dynamic import: ../lang/en.json

[stevebauman]

When following the default Vite instructions and I load my website, the below error flashes for a second, and then disappears. Everything still works, but not sure what the cause of this is:

import { createApp } from 'vue'
import { i18nVue } from 'laravel-vue-i18n'

createApp()
    .use(i18nVue, {
        resolve: async lang => {
            const langs = import.meta.glob('../../lang/*.json');

            return await langs[`../../lang/${lang}.json`]();
        }
    })
    .mount('#app');

However, if I update the resolve callback to include a php_ prefix in the return await statement, the error no longer appears and everything functions normally:

import { createApp } from 'vue'
import { i18nVue } from 'laravel-vue-i18n'

createApp()
    .use(i18nVue, {
        resolve: async lang => {
            const langs = import.meta.glob('../../lang/*.json');

-           return await langs[`../../lang/${lang}.json`]();
+           return await langs[`../../lang/php_${lang}.json`]();
        }
    })
    .mount('#app');

Is this a bug, or just a documentation issue? Thanks for your help!

[xiCO2k]

Do you have any .json lang files or only the .php lang files?

Thanks for the report btw.

[stevebauman]

Thanks for the reply @xiCO2k! 🙏

Only traditional .php lang files, no .json lang files at all in this application 👍

[xiCO2k]

got it, will take a look on that case!

[xiCO2k]

Hey @stevebauman sorry for the delay on this.

I did a try on this repo: https://github.com/xiCO2k/laravel-vue-i18n-app and I did not got the error message.

Can you check if the error is still there, and if possible replicate on this repo?

Thanks

[paulelpidorou]

Probably related to this, but i am getting a similar error when setting up using Laravel and Inertiajs

Translations still work but i get the error.

The app.js configuration

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`,
        import.meta.glob('./Pages/**/*.vue')),
    setup ({el, App, props, plugin}) {
        return createApp({render: () => h(App, props)}).
        use(plugin).
        use(ZiggyVue).
        use(vfm).
        use(i18nVue, {
            resolve: async lang => {
                const langs = import.meta.glob('../../lang/*.json');
                return langs[`../../lang/${lang}.json`]();
            }
        }).
        use(VueGoogleMaps, {
            load: {
                key: googleMapsApiKey,
            },
        }).
        mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

If I include a php_ prefix as @stevebauman mentions everything works and error goes away.