TypeError: langs[(("../../lang/" + (intermediate value)) + ".json")] is not a function

Hi,

I’ve tried installing this package and followed the documentation for Vite, but I’m getting the following error in the console.

Uncaught (in promise) TypeError: langs[(("../../lang/" + (intermediate value)) + ".json")] is not a function

I am getting this on a fresh installation of Laravel Jetstream and the installation of this package

laravel new example --jet 

npm i laravel-vue-i18n

vite.config.js

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import i18n from "laravel-vue-i18n/vite";

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app.js",
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        i18n(),
    ],
});

app.json

import "./bootstrap";
import "../css/app.css";

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";
import { i18nVue } from "laravel-vue-i18n";

const appName =
    window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";

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(i18nVue, {
                resolve: async (lang) => {
                    const langs = import.meta.glob("../../lang/*.json");
                    return await langs[`../../lang/${lang}.json`]();
                },
            })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
});

InertiaProgress.init({ color: "#4B5563" });

Am I stupid and am I forgetting something or is something not working properly ?

[vildanbina]

I resolved that issue when I used Server Side Rendering. It didn’t work in other ways.

So, to help others:

In my app.js file I have:

app.use(i18nVue, {
    lang: 'en',
    resolve: lang => {
        const langs = import.meta.globEager('../../lang/*.json');
        return langs[`../../lang/${lang}.json`].default;
    },
});

While in my vite.config.js I have:

export default defineConfig({
    plugins: [
        // ...
        i18n(),
    ],
});

In this way works fine.

[xiCO2k]

Thanks guys!