nuxt / cli

⚡️ Nuxt Generation CLI Experience.
https://github.com/nuxt/cli/discussions/3
MIT License
247 stars 55 forks source link

addVitePlugin usage blocks Vite HMR fully #425

Open TechAkayy opened 2 months ago

TechAkayy commented 2 months ago

Environment

npx nuxi info


Reproduction

https://github.com/TechAkayy/nuxt-3110

import {addVitePlugin} from '@nuxt/kit'

export default defineNuxtConfig({
  modules: [
    function (inlineOptions, nuxt) {
      addVitePlugin({
        name: 'live-designer',
        config: (config, {command, mode}) => {
          return config
        },
      })
    },
  ],
})

image

Additional context

Thanks for looking into this. If you require any more info, please let m eknow.

Logs

No response

TechAkayy commented 2 months ago

After a lot of trial and error, I have figured out where the issue is:

Nuxt's HMR is getting blocked when, in the custom vite plugin's "config" hook, either the original config object (after mutating it) or a mergedConfig is returned. Vite docs seems to support this return in the config hook.

This HMR break is specific to Nuxt, as HMR is not blocked in a plain Vue project with the same custom vite plugin .

This breaks Nuxt's HMR (returns a merged config)

image

And after some very long timeout (couple of minutes), this gets logged

image

This doesn't break HMR (avoids mergeConfig and directly mutates the config)

image

I have updated my Vite plugin to directly mutate instead returning a config using mergeConfig vite utility. The above is just an example, I do make few other config updates, hence used mergeConfig.

Even though this is solved at my end, why Nuxt's HMR is blocked when using mergeConfig utility and returning a merged config is still a mystery, unless Im not supposed to do this way.

Maintainers, please feel free to close this if you see no action on this issue. Thanks for looking into this.