nuxt/cli

Nuxt listen hook HMR issue from 3.7.4

Closed this issue · 4 comments

Environment

npx nuxi info


  • Operating System: Darwin
  • Node Version: v21.1.0
  • Nuxt Version: 3.11.2
  • CLI Version: 3.11.1
  • Nitro Version: 2.9.6
  • Package Manager: npm@10.2.0
  • Builder: -
  • User Config: hooks
  • Runtime Modules: -
  • Build Modules: -

Reproduction

https://github.com/TechAkayy/nuxt-374-2

Clone & install deps. Open nuxt.config.ts, and start dev-server.

Open start-up page in browser, and check console in both editor & browser

I pass the "actual" dev-server port (3000, or the next assigned one) to my vite plugin, hence adding my vite plugin in the "listen" hook. Please let me know if you see any workaround, or I shouldn't be doing it this way.

hooks: {
  listen: async (server, listener) => {
    addVitePlugin({
      name: 'live-designer',
      config: (config, {command, mode}) => {
        return config
      },
    })
  },
},

image

image

From 3.11 onwards: The HMR socket connection doesn't work at all, and timeouts with the errors after like some 4-5 mins.

image

Additional context

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

Logs

No response

Probably related to #247, HMR doesn't work anymore.

If anyone have any workaround for now, please share. Thanks!

Updated reproduction to latest using npx nuxi upgrade --force. Same issue even when running with npx nuxi-edge@latest dev.

Updated reproduction to latest (3.11) using npx nuxi upgrade --force, and manually updated package.json (for those changes to the starter template). Same issue even when running with npx nuxi-edge@latest dev.

Previously, attempt to connect to socket immediately got logged. But now, it doens't connect at all. This way HMR never gets activated.

After like some 4-5 mins, I see the error message both on the browser console as well as in the dev-server console. Previously it was instantly erroring out.

image

Nuxt HMR doesn't like vite plugin added via addVitePlugin that returns the original config or merged config (using Vite's mergeConfig) in the config hook. Closing as explained in #425