Cannot translate the value of keypath 'auth.failed'. Use the value of keypath as default.

Packages

"vue": "^2.6.6",
"vue-i18n": "^8.8.2",
"@kirschbaum-development/laravel-translations-loader": "^0.4.2",

I’m doing a simple test:

app.js has the following code among other things

window.Vue = require('vue');

import VueI18n from 'vue-i18n';

import languageBundle from '@kirschbaum-development/laravel-translations-loader/php?parameters={{ $1 }}!@kirschbaum-development/laravel-translations-loader';

Vue.use(VueI18n);

const fallbackLocale = 'en';

const i18n = new VueI18n({
    fallbackLocale,
    locale: 'en',
    messages: languageBundle
});

ExampleComponent.vue has the following code among other things

{{ $t('auth.failed') }}

This will produce the error: Cannot translate the value of keypath 'auth.failed'. Use the value of keypath as default.

But if i do this:

const i18n = new VueI18n({
    fallbackLocale,
    locale: 'en',
    messages: {
        en: {
            auth: {
                failed: 'For real?!'
            }
        },
    }
});

It works… so, any ideas why it is not liking the languageBundle? Anything missing or wrong?

[luisdalmolin]

@Morinohtar The problem was the path separators on windows. That is fixed on version 0.4.4 if you want to upgrade.

[luisdalmolin]

Ok, I’m going to try to replicate this in a windows environment over the weekend. In the meantime, using the instructions noted here (https://github.com/kirschbaum-development/laravel-translations-loader#using-a-different-folder) under the Using a different folder here should probably solve your issue.

Basically you need:

1 - Create an index.js file in the resources/lang directory. 2 - Change your import to: import languageBundle from '@kirschbaum-development/laravel-translations-loader/php?parameters={{ $1 }}!@kirschbaum-development/laravel-translations-loader!./../lang/index.js';

Let me know if that works.