Problems when using hotreload in vue with vite

[paulwer]

Hello everyone, I encounter an error, which happens, when vite is rerendering the window after a hot-reload in the devolopment environment. Does someone is able to work.

Current workaround is to refresh the page, when this occurs.

Log-Line 5 (the single "1") is from my application code and can be ignored.

In Result after this error has occured, the rerendered component is missing.

[JanCizmar]

Hello! Thanks for reporting! We'll look into that. Anyway, minimal reproducible example would help a lot! 🚀

[paulwer]

sorry for the late response. I am still quite new to this. what can I provide for you? Like an example-project?

[JanCizmar]

Yeah! Example project would be super appreciated. 🤘

[paulwer]

I cannot reproduce this in a sandbox environment. Maybe this error is a result of using it within vite-unplugin auto-import or a currently disabled I18NVue component, which we are about to replace fully, if tolgee suits all needs. (its a bit messy)

Any suggestion for me here?

import { fileURLToPath } from 'url'
import VueI18n from '@intlify/vite-plugin-vue-i18n'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import DefineOptions from 'unplugin-vue-define-options/vite'
import { defineConfig } from 'vite'
import Pages from 'vite-plugin-pages'
import Layouts from 'vite-plugin-vue-layouts'
import vuetify from 'vite-plugin-vuetify'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),

    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
    vuetify({
      styles: {
        configFile: 'src/styles/variables/_vuetify.scss',
      },
      autoImport: true,
    }),
    Pages({
      dirs: ['./src/pages'],

      // ℹ️ We need three routes using single routes so we will ignore generating route for this SFC file
      onRoutesGenerated: routes => [
        // Email filter
        {
          path: '/apps/email/:filter',
          name: 'apps-email-filter',
          component: '/src/pages/apps/email/index.vue',
          meta: {
            navActiveLink: 'apps-email',
            layoutWrapperClasses: 'layout-content-height-fixed',
          },
        },

        // Email label
        {
          path: '/apps/email/label/:label',
          name: 'apps-email-label',
          component: '/src/pages/apps/email/index.vue',
          meta: {
            // contentClass: 'email-application',
            navActiveLink: 'apps-email',
            layoutWrapperClasses: 'layout-content-height-fixed',
          },
        },
        ...routes,
      ],
    }),
    Layouts({
      layoutsDirs: './src/layouts/',
    }),
    Components({
      dirs: ['src/@core/components', 'src/views/demos'], 
      dts: true,
    }),
    AutoImport({
      imports: ['vue', 'vue-router', '@vueuse/core', '@vueuse/math', 'vue-i18n', 'pinia'],
      dirs: ['node_modules/@tolgee/vue'],
      vueTemplate: true,
    }),
    VueI18n({
      runtimeOnly: true,
      compositionOnly: true,
      include: [
        fileURLToPath(new URL('./src/plugins/i18n/locales/**', import.meta.url)),
      ],
    }),
    DefineOptions(),
  ],
  define: { 'process.env': {} },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@themeConfig': fileURLToPath(new URL('./themeConfig.ts', import.meta.url)),
      '@core': fileURLToPath(new URL('./src/@core', import.meta.url)),
      '@layouts': fileURLToPath(new URL('./src/@layouts', import.meta.url)),
      '@images': fileURLToPath(new URL('./src/assets/images/', import.meta.url)),
      '@styles': fileURLToPath(new URL('./src/styles/', import.meta.url)),
      '@configured-variables': fileURLToPath(new URL('./src/styles/variables/_template.scss', import.meta.url)),
      '@axios': fileURLToPath(new URL('./src/plugins/axios', import.meta.url)),
      '@validators': fileURLToPath(new URL('./src/@core/utils/validators', import.meta.url)),
      'apexcharts': fileURLToPath(new URL('node_modules/apexcharts-clevision', import.meta.url)),
    },
  },
  build: {
    chunkSizeWarningLimit: 5000,
  },
  optimizeDeps: {
    exclude: ['vuetify'],
    entries: [
      './src/**/*.vue',
    ],
  },
})

[stepan662]

Hey, I'm not able to diagnose your bug from this. if you would have a reproducible example or some more insight, I'll into it.

[paulwer]

I am also not able to reproduce this on a plain vue instance. this also only occurs on hot reload within dev and vite. any siggestion, how I can get a reproduceable version to you?

[JanCizmar]

Simple vue app with few steps to reproduce would be enough.

[paulwer]

after upgrading to vite 4.4.9 this issue does no longer apear. So this was likely the fault by a previos hot-reload import behavior (from my pov).

I could not detect any relations between a specific dep and vite, because when installing it plain with only vite, the error has not occured.

I will therefore close this issue, because its not longer relevant.

Thank you for your kind support anyways. Keep up the good work :)