kazupon / vue-i18n

:globe_with_meridians: Internationalization plugin for Vue.js
https://kazupon.github.io/vue-i18n/
MIT License
7.28k stars 862 forks source link

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

Open devstack-be opened 1 year ago

devstack-be commented 1 year ago

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

`

      <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

cc8adfbe24817341fd8f07c01ebf67bc

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

yashha commented 1 year ago

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