<i18n-t> error 500 [Codegen node...]

[Devstack]

Reporting a bug?

Hello,

I m using a vue component named "SimplePagination.vue" to manage my pagination.
Inside this one, i m using the Translation component ().
Im facing the following error:
"[plugin:vite:vue] Codegen node is missing for element/if/for node. Apply appropriate transforms first."

I already spent several hours on the problem without finding a solution.
I deleted and reinstalled the node_modules folder, I tried the problematic code on another page and/or in another component, without any result.
As soon as I add the template slots inside the i18n-t component, the error appears.

On another project with vue 3, this code is working perfectly.

Expected behavior

No error should appear

Reproduction

<i18n-t keypath="info"> <template v-slot:start> <span class="font-semibold">{{ totalItems === 0 ? '0' : currentPage === 1 ? '1' : Math.ceil(1 + (currentPage - 1) * itemPerPage) }}</span> </template> <template v-slot:end> <span class="font-semibold">{{ Math.min(currentPage * itemPerPage, totalItems) }}</span> </template> <template v-slot:total> <span class="font-semibold">{{ totalItems }}</span> </template> </i18n-t>

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
    Memory: 8.09 GB / 15.95 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (107.0.1418.62)
    Internet Explorer: 11.0.22000.120

Screenshot

Additional context

This project is build with laravel , jetstream and inertia js

"devDependencies": {
"@inertiajs/inertia": "^0.11.0",
"@inertiajs/inertia-vue3": "^0.6.0",
"@inertiajs/progress": "^0.2.7",
"@intlify/vite-plugin-vue-i18n": "6.0.1",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/typography": "^0.5.2",
"@vitejs/plugin-vue": "^3.0.0",
"autoprefixer": "^10.4.7",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.0",
"lodash": "^4.17.19",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.0",
"unplugin-vue-components": "^0.22.11",
"vite": "^3.0.0",
"vue": "^3.2.31"
},
"dependencies": {
"@headlessui/vue": "^1.7.4",
"@heroicons/vue": "^2.0.13",
"@popperjs/core": "^2.11.2",
"@vuelidate/core": "^2.0.0",
"@vuelidate/validators": "^2.0.0",
"@vueuse/core": "^9.6.0",
"autoprefixer": "10.4.5",
"bootstrap": "^5.2.2",
"gulp": "~4.0.2",
"gulp-autoprefixer": "^8.0.0",
"gulp-beautify": "^3.0.0",
"gulp-cache": "~1.1.3",
"gulp-clean-css": "^4.3.0",
"gulp-concat": "^2.6.1",
"gulp-file-include": "^2.3.0",
"gulp-imagemin": "~7.1.0",
"gulp-js-import": "^1.0.6",
"gulp-minify": "^3.1.0",
"gulp-newer": "^1.4.0",
"gulp-plumber": "~1.2.1",
"gulp-replace": "^1.1.3",
"gulp-sass": "^5.1.0",
"gulp-sass-unicode": "^1.0.5",
"gulp-sourcemaps": "~3.0.0",
"gulp-touch-cmd": "0.0.1",
"gulp-uglify": "~3.0.2",
"imagemin-jpeg-recompress": "~7.0.0",
"imagemin-pngquant": "~9.0.2",
"sass": "1.49.0",
"v-calendar": "^3.0.0-alpha.8",
"vue-i18n": "9",
"vue-tel-input": "^6.0.5",
"vue-toastification": "^2.0.0-rc.5"
}

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion
• The provided reproduction is a minimal reproducible example of the bug.

[yashha]

Hi @devstack-be, did you find a solution for this?