TypeError: Cannot read properties of undefined (reading 'kind') when adding i18n() to plugins in vite.config.js

[grn-dk]

In a laravel vite vue project I installed laravel-vue-i18n with npm i laravel-vue-i18n.

When starting the development server using the command npm run dev, an error occurred:

> dev
> vite

error when starting dev server:
TypeError: Cannot read properties of undefined (reading 'kind')
    at parseItem (file:///.../node_modules/laravel-vue-i18n/dist/loader.mjs:59:14)
    at parseItem (file:///.../node_modules/laravel-vue-i18n/dist/loader.mjs:78:12)
    at parseItem (file:///.../node_modules/laravel-vue-i18n/dist/loader.mjs:78:12)
    at parseItem (file:///.../node_modules/laravel-vue-i18n/dist/loader.mjs:76:36)
    at file:///.../node_modules/laravel-vue-i18n/dist/loader.mjs:66:46
    at Array.map (<anonymous>)
    at parseItem (file:///.../node_modules/laravel-vue-i18n/dist/loader.mjs:66:32)
    at parseItem (file:///.../node_modules/laravel-vue-i18n/dist/loader.mjs:76:36)
    at file:///.../node_modules/laravel-vue-i18n/dist/loader.mjs:66:46
    at Array.map (<anonymous>)

The problem is in the vite.config.js when i add i18n() in the plugins section:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import { viteStaticCopy } from 'vite-plugin-static-copy'
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,
                },
            },
        }),
        viteStaticCopy({
          targets: [
            {
              src: 'node_modules/intl-tel-input/build/js/utils.js',
              dest: 'assets'
            }
          ]
        }),
    i18n()
    ],
});

Any hints, tricks, or tips? Thank you.

[xiCO2k]

can you share your .php translation file?

looks like something related with that

[grn-dk]

@xiCO2k thank you for the hint!

I don't have a .php translation file. I just wanted to use SSR (Server Side Rendering) (https://github.com/xiCO2k/laravel-vue-i18n?tab=readme-ov-file#ssr-server-side-rendering).

I followed the guide here: https://laraveldaily.com/post/laravel-and-vuejs-translations-with-i18n-plugin and it advises to add import of the plugin in vite.config.js - but the vue translation works without the vite.config.js import.

I have this in my resources/js/app.js which specifies that I have the language files in lang folder.

.use(i18nVue, { 
  resolve: async lang => {
    const langs = import.meta.glob('../../lang/*.json');
    return await langs[`../../lang/${lang}.json`]();
  }
})

But this is a bit different from the github documentation that is not using async loading.

I will close this issue, because it has been resolved. Thank you.

[xiCO2k]

thanks 👍