Cannot read properties of undefined (reading 'VITE_LARAVEL_VUE_I18N_HAS_PHP') #49

andrey-helldar · 2022-07-22T23:00:21Z

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.

The text was updated successfully, but these errors were encountered:

xiCO2k · 2022-07-22T23:04:28Z

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

andrey-helldar · 2022-07-22T23:08:01Z

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 · 2022-07-22T23:08:33Z

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 · 2022-07-22T23:11:38Z

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 · 2022-07-22T23:15:27Z

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 · 2022-07-22T23:19:01Z

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 · 2022-07-22T23:19:08Z

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 · 2022-07-22T23:24:13Z

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

xiCO2k · 2022-07-22T23:25:39Z

really interesting case, will try to debug.

Thanks for all the help @andrey-helldar.

andrey-helldar · 2022-07-22T23:31:17Z

Next steps:

Go to node_modules/laravel-vue-i18n/dist/cjs/utils/has-php-translations.js:22
Replace line with return typeof process.env?.VITE_LARAVEL_VUE_I18N_HAS_PHP !== 'undefined' && process.env?.VITE_LARAVEL_VUE_I18N_HAS_PHP ? true : false;
Restart vite
Go to node_modules/laravel-vue-i18n/dist/utils/has-php-translations.js: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;
Remove the node_modules/laravel-vue-i18n/dist/utils/has-php-translations.js.map file
Restart vite
Go to node_modules/.vite/deps/laravel-vue-i18n.js:348
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 · 2022-07-22T23:38:00Z

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 · 2022-07-22T23:55:39Z

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

xiCO2k · 2022-07-23T00:23:26Z

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

andrey-helldar · 2022-07-23T10:21:12Z

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 · 2022-07-23T23:27:38Z

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 · 2022-07-24T03:04:52Z

So after the merge you got not problem?

andrey-helldar · 2022-07-24T09:06:12Z

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 · 2022-07-24T10:33:30Z

So after the merge you got not problem?

It's works:

xiCO2k · 2022-07-24T17:26:58Z

Awesome, will tag it

xiCO2k added bug Something isn't working more info needed labels Jul 22, 2022

andrey-helldar pushed a commit to andrey-helldar/laravel-vue-i18n that referenced this issue Jul 22, 2022

Fix for xiCO2k#49

83a3a59

andrey-helldar mentioned this issue Jul 22, 2022

Fix for Cannot read properties of undefined (VITE_LARAVEL_VUE_I18N_HAS_PHP) #50

Merged

andrey-helldar closed this as completed Jul 23, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot read properties of undefined (reading 'VITE_LARAVEL_VUE_I18N_HAS_PHP') #49

Cannot read properties of undefined (reading 'VITE_LARAVEL_VUE_I18N_HAS_PHP') #49

andrey-helldar commented Jul 22, 2022 •

edited

Loading

xiCO2k commented Jul 22, 2022

andrey-helldar commented Jul 22, 2022 •

edited

Loading

andrey-helldar commented Jul 22, 2022

andrey-helldar commented Jul 22, 2022 •

edited

Loading

xiCO2k commented Jul 22, 2022

andrey-helldar commented Jul 22, 2022 •

edited

Loading

xiCO2k commented Jul 22, 2022 •

edited

Loading

andrey-helldar commented Jul 22, 2022 •

edited

Loading

xiCO2k commented Jul 22, 2022

andrey-helldar commented Jul 22, 2022

andrey-helldar commented Jul 22, 2022 •

edited

Loading

andrey-helldar commented Jul 22, 2022

xiCO2k commented Jul 23, 2022

andrey-helldar commented Jul 23, 2022

andrey-helldar commented Jul 23, 2022 •

edited

Loading

xiCO2k commented Jul 24, 2022

andrey-helldar commented Jul 24, 2022 •

edited

Loading

andrey-helldar commented Jul 24, 2022

xiCO2k commented Jul 24, 2022

Cannot read properties of undefined (reading 'VITE_LARAVEL_VUE_I18N_HAS_PHP') #49

Cannot read properties of undefined (reading 'VITE_LARAVEL_VUE_I18N_HAS_PHP') #49

Comments

andrey-helldar commented Jul 22, 2022 • edited Loading

xiCO2k commented Jul 22, 2022

andrey-helldar commented Jul 22, 2022 • edited Loading

andrey-helldar commented Jul 22, 2022

andrey-helldar commented Jul 22, 2022 • edited Loading

xiCO2k commented Jul 22, 2022

andrey-helldar commented Jul 22, 2022 • edited Loading

xiCO2k commented Jul 22, 2022 • edited Loading

andrey-helldar commented Jul 22, 2022 • edited Loading

xiCO2k commented Jul 22, 2022

andrey-helldar commented Jul 22, 2022

andrey-helldar commented Jul 22, 2022 • edited Loading

andrey-helldar commented Jul 22, 2022

xiCO2k commented Jul 23, 2022

andrey-helldar commented Jul 23, 2022

andrey-helldar commented Jul 23, 2022 • edited Loading

before

after

xiCO2k commented Jul 24, 2022

andrey-helldar commented Jul 24, 2022 • edited Loading

andrey-helldar commented Jul 24, 2022

xiCO2k commented Jul 24, 2022

andrey-helldar commented Jul 22, 2022 •

edited

Loading

andrey-helldar commented Jul 22, 2022 •

edited

Loading

andrey-helldar commented Jul 22, 2022 •

edited

Loading

andrey-helldar commented Jul 22, 2022 •

edited

Loading

xiCO2k commented Jul 22, 2022 •

edited

Loading

andrey-helldar commented Jul 22, 2022 •

edited

Loading

andrey-helldar commented Jul 22, 2022 •

edited

Loading

andrey-helldar commented Jul 23, 2022 •

edited

Loading

andrey-helldar commented Jul 24, 2022 •

edited

Loading