Keys printed instead of translations with Inertia

[rachids]

Hello,

Thanks for this package!

Basically, my problem is that when I invoke $t('auth.failed') in my templates, all I get is the key auth.failed which validates that the package is working but it doesn't seem to be able to find the proper key in my json file.

I have scratched my head really hard on this, read both closed and opened issues and can't find a solution so I turn to you to help me figure out what I'm doing wrong.

I have an app that is using Inertia and I've followed the instructions twice to install the package. I want to use the PHP way to get my translations because I find it easier to maintain, so I edited my webpack.mix.js according to the instructions and I can see it compiles everything fine when I run either npm run dev or npm run watch. So the problem must be elsewhere.

Here are the relevant files: app.js

require('./bootstrap');

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { i18nVue } from 'laravel-vue-i18n'

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

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(i18nVue, {
                resolve: lang => import(`../../lang/${lang}.json`),
            })
            .mixin({ methods: { route } })
            .mount(el);
    },
});

webpack.mix.js

const mix = require('laravel-mix');
require('laravel-vue-i18n/mix');

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ])
    .i18n()
    .alias({
        '@': 'resources/js',
    });

if (mix.inProduction()) {
    mix.version();
}

my translations files are the regular ones:

- /lang
- - /en
- - - auth.php

In the Welcome.vue that comes with Jetstream I have tried this:

<script setup>
import { Head, Link } from '@inertiajs/inertia-vue3';
import { trans } from 'laravel-vue-i18n';

defineProps({
    canLogin: Boolean,
    canRegister: Boolean,
    laravelVersion: String,
    phpVersion: String,
});

const test = trans('auth.failed')
</script>

<template>
        {{ $t('auth.failed') }}
        {{ $t('auth.password') }}
        {{ test }}
</template>

And all it shows are the keys, not the proper translations. In the console tab of my browser I can see it calling the lang_php_en_json.js which contains what I want.

Am I missing something here ?

[xiCO2k]

Hey @rachids will take a look on that, since I did focus a lot of my time on vite integration, it may have an issue, will take a look on that and let you know.

[xiCO2k]

Hey @rachids, did not found any issue.

Just created this repo: https://github.com/xiCO2k/laravel-vue-i18n-webpack-app with Jetstream and webpack, let me know if it gives the same error for you.

[rachids]

Hello @xiCO2k

Thank you for taking the time to try it out. I'll checkout your repo later today and check what you did that I missed.

[rachids]

I checked out your repository, I added some keys and it works flawlessly.

I triple-checked every config file in my project and I'm 100% sure I did the right things, but still, doesn't work. Maybe I messed up my webpack config by installing Storybook and doing some weird vaudoo stuff only frontend devs understand..

Anyway, I fixed the translations by migrating from webpack to Vite and now it works.

Thanks again for your time, I'll close this issue.