Cannot read properties of undefined (reading 'VITE_LARAVEL_VUE_I18N_HAS_PHP')

[andrey-helldar]

• laravel-vue-i18n - 2.1.1
• vite - 2.9.9
• vuejs 3.2.25
• node 16.16.0
• without laravel

// .env

VITE_LARAVEL_VUE_I18N_HAS_PHP=false

// src/main.ts

import { createApp } from 'vue'
import { i18nVue } from 'laravel-vue-i18n'
import i18nOptions from '@/utils/lang'

import pinia from '@/utils/pinia'

createApp(App)
    .use(i18nVue, i18nOptions(pinia))

// src/utils/lang

import { Pinia } from 'pinia'
import { useSettingsStore } from '@/stores/settings'

export default (pinia: Pinia) => {
    const lang = useSettingsStore(pinia).locale

    const resolve = async (lang: string) => {
        const files = import.meta.glob('../../lang/*.json')

        return await files[`../../lang/${ lang }.json`]()
    }

    return { lang, resolve }
}

Result: not working

If we add output to the console, we see that the files are loaded:

const resolve = async (lang: string) => {
    const files = import.meta.glob('../../lang/*.json')

    console.log(files)
    console.log(
        import.meta.env.VITE_API_URL,
        import.meta.env.VITE_LARAVEL_VUE_I18N_HAS_PHP
    )

    return await files[`../../lang/${ lang }.json`]()
}

Without the VITE_LARAVEL_VUE_I18N_HAS_PHP key, I also get the error:

Version 1.4.4 worked perfectly.

[xiCO2k]

Hey @andrey-helldar can you show me your vite.config.js file. Thanks.

[andrey-helldar]

Fix for this error:

// node_modules/laravel-vue-i18n/dist/utils/has-php-translations.js:9
return import.meta.env?.VITE_LARAVEL_VUE_I18N_HAS_PHP ? true : false;

// node_modules/.vite/deps/laravel-vue-i18n.js:348
return import_meta.env?.VITE_LARAVEL_VUE_I18N_HAS_PHP ? true : false;

Result:

[andrey-helldar]

My vite.config.ts is:

import vuetify from 'vite-plugin-vuetify'
import { defineConfig } from 'vite'
import { resolve } from 'path'

import vue from '@vitejs/plugin-vue'

export default defineConfig({
    resolve: {
        alias: {
            '@': resolve(__dirname, './src')
        }
    },
    plugins: [
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false
                }
            }
        }),
        vuetify({
            autoImport: true,
            styles: 'sass'
        })
    ],
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "./src/assets/styles/_variables";`
            }
        }
    }
})

[andrey-helldar]

I don't use Laravel in this project (this project only contains the frontend), so I didn't define the i18n plugin as the readme says it's for Lara.

Now I added a plugin call and everything worked out of the box: (no, see below)

// vite.config.ts

import { defineConfig } from 'vite'
import { resolve } from 'path'

import i18n from 'laravel-vue-i18n/dist/vite'
import vuetify from 'vite-plugin-vuetify'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    resolve: {
        alias: {
            '@': resolve(__dirname, './src')
        }
    },
    plugins: [
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false
                }
            }
        }),
        vuetify({
            autoImport: true,
            styles: 'sass'
        }),
        i18n()
    ],
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "./src/assets/styles/_variables";`
            }
        }
    }
})

The comment confused me:

// Laravel >= 9 i18n(),

[xiCO2k]

got it, that is an interesting use case, for sure will need to dig in more.

So you are just using the *.json lang files right?

[andrey-helldar]

got it, that is an interesting use case, for sure will need to dig in more.

So you are just using the *.json lang files right?

Yes

https://github.com/volunteers-crm/web/tree/laravel-vue-i18n-2.x

[xiCO2k]

Can you try set on your package.json file this:

"laravel-vue-i18n": "github:xiCO2k/laravel-vue-i18n"

and then reinstall all the node dependences?

Thanks for helping me debug this, Francisco

[andrey-helldar]

1. Removed node_modules and package.lock
2. Replace "laravel-vue-i18n": "^2.1.1" with "laravel-vue-i18n": "github:xiCO2k/laravel-vue-i18n"
3. Run the npm i console command.
4. Check in browser
5. I see the error

[xiCO2k]

really interesting case, will try to debug.

Thanks for all the help @andrey-helldar.

[andrey-helldar]

Next steps:

1. Go to node_modules/laravel-vue-i18n/dist/cjs/utils/has-php-translations.js:22
2. Replace line with return typeof process.env?.VITE_LARAVEL_VUE_I18N_HAS_PHP !== 'undefined' && process.env?.VITE_LARAVEL_VUE_I18N_HAS_PHP ? true : false;
3. Restart vite
4. Go to node_modules/laravel-vue-i18n/dist/utils/has-php-translations.js:9
5. Replace line with return typeof import.meta.env?.VITE_LARAVEL_VUE_I18N_HAS_PHP !== 'undefined' && import.meta.env?.VITE_LARAVEL_VUE_I18N_HAS_PHP ? true : false;
6. Remove the node_modules/laravel-vue-i18n/dist/utils/has-php-translations.js.map file
7. Restart vite
8. Go to node_modules/.vite/deps/laravel-vue-i18n.js:348
9. Replace line with return typeof import_meta.env?.VITE_LARAVEL_VUE_I18N_HAS_PHP !== "undefined" && import_meta.env?.VITE_LARAVEL_VUE_I18N_HAS_PHP ? true : false;

Now, it's works

[andrey-helldar]

I was wrong. The problem is not solved :)

I forgot that I just changed files 😅

https://github.com/volunteers-crm/web/blob/laravel-vue-i18n-2.x/vite.config.ts

// vite.config.ts

import { defineConfig } from 'vite'
import { resolve } from 'path'

import i18n from 'laravel-vue-i18n/dist/vite'
import vuetify from 'vite-plugin-vuetify'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    resolve: {
        alias: {
            '@': resolve(__dirname, './src')
        }
    },
    plugins: [
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false
                }
            }
        }),
        vuetify({
            autoImport: true,
            styles: 'sass'
        }),
        i18n()
    ],
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "./src/assets/styles/_variables";`
            }
        }
    }
})

https://github.com/volunteers-crm/web/blob/laravel-vue-i18n-2.x/src/utils/lang.ts

// src/utils/lang.ts

import { Pinia } from 'pinia'
import { useSettingsStore } from '@/stores/settings'

export default (pinia: Pinia) => {
    const lang = useSettingsStore(pinia).locale

    const resolve = async (lang: string) => {
        const files = import.meta.glob('../../lang/*.json')

        return await files[`../../lang/${ lang }.json`]()
    }

    return { lang, resolve }
}

https://github.com/volunteers-crm/web/blob/laravel-vue-i18n-2.x/.env.example#L3

// .env

VITE_LARAVEL_VUE_I18N_HAS_PHP=false

And error)

PS: my package.json is https://github.com/volunteers-crm/web/blob/laravel-vue-i18n-2.x/package.json

[andrey-helldar]

It's a simple: import.meta.env is undefined

[xiCO2k]

Thanks for the PR, can you try again, and let me know?

[andrey-helldar]

Thanks for the PR, can you try again, and let me know?

If we add the VITE_LARAVEL_VUE_I18N_HAS_PHP variable key to the env file, then everything works. Everything works without it too.

Thank you!

[andrey-helldar]

By the way, so that the application does not load extra localizations during compilation, you can change the configuration:

before

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');

after

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

createApp()
    .use(i18nVue, {
        resolve: lang => import(`../../lang/${lang}.json`)
    })
    .mount('#app');

[xiCO2k]

So after the merge you got not problem?

[andrey-helldar]

When I wrote the code, there were no problems, but yesterday I could not check because npm and yarn gave an error installing dependencies when deleting the node_modules folder. I'll try again today.

npm ERR! Cannot read properties of null (reading 'explain')

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Helldar\AppData\Local\npm-cache_logs\2022-07-24T10_18_35_446Z-debug-0.log

[andrey-helldar]

So after the merge you got not problem?

It's works:

[xiCO2k]

Awesome, will tag it