nuxt/cli

Vite HMR websocket is not working after upgrading nuxt from 3.6.5 to 3.7.4

Opened this issue · 9 comments

nikowonde commented

I am running nuxt over proxy to custom local domain and it was previously working correctly with protocol and host defined in vite.server.hmr config. In 3.6.5 defined protocol and host were used and everything worked correctly.

In nuxt.config

vite: {
    server: {
      hmr: {
        protocol: 'ws',
        host: 'localhost',
      },
    },
  },

After upgrading to 3.7.4 vite/dist/client is resolving SERVER_HOST to localhost:undefined/[buildAssetsDir] and both HMR_PROTOCOL and HMR_PORT are being resolved to null which is causing socketHost to default to fallback values which are derived from properties in window.location? and with these values (and maybe because of proxy usage) it's throwing an error Illegal or invalid string for new Websocket('wss://proxyurl:/[buildAssetsDir]') call in setupWebSocket func.

Can't really provide reproduction at this time as I do not know how I would approach creating one with usable proxy.

I got tip from @danielroe to downgrade nuxi to 3.6.5 and that seems to fix it for now.

pi0 commented

Hi. The new HMR server is now running on the same main port of dev server (3000).

Please consider removing vite.server.hmr options to fix and also avoid downgrading CLI version as it can cause other incompatibility issues for the future in your project.

Let me know if doing above steps still had problems with your reverse proxy.

nikowonde commented

Hi. Does the new HMR server use same port value that can be overwritten via .env file with NUXT_PORT or is it baked in to 3000?

Removing vite.server.hmr config doen't seem to help as (I believe) this proxy is not configured to proxy websockets and that config was added previously to prevent this websocket from being proxied. Do you have any other suggestions that would help solving this problem?

This project is being worked on by mulitple parties and each party have similar proxy setup and having it is quite essential while we are migrating from nuxt v2 to v3. If only solution to this problem is to add support for websocket proxying then it would be worth it for me to look into that.

nikowonde commented

Hi there, I've just upgraded to 3.8 and were scrolling through nuxi/cli release notes and for 3.9.0 release there was comment about HMR with nuxi dev --tunnel command. I thought to give it a try and see what happens.

First I was left without any luck as I tried it, then I tried adding back vite.server.hmr config from the original post and ran the command again. Just shooting my shots and lo and behold all error messages went away and HMR seems to be working like it should.

Is there going to be any harm, (other than exposing dev site to local network which itself is probably not really harmful) if I'll start using that as go-to dev spin up command?

  • 👍1
  • ❤️1
pi0 commented

Happy hearing that worked for you! If you mean using --tunnel, AFAIK the generated URL should be unique (but i advice you to double check cloudflare docs). So as long as you keep URL private to yourself, yes there should be no harm for using this feature for development.

nikowonde commented

Okay sorry. I got too exited too soon, l just got thinking about my globally installed nuxi version and checked it to be outdated to 3.5.3 hence nuxi dev --tunnel worked. I upgraded it and ended back to square one.

Do you have any ideas if same kind of functionality (as in 3.5.3) can be achieved with current version or would it need major changes to the nuxi code?

  • 👍1
pi0 commented

Can you share your current reverse proxy configuration? I would be happy to help update it in order to work with the latest nuxi CLI.

nikowonde commented

Our configuration is most likely not so normal and I can’t really share one single configuration file per se. I can try laying out the configuration in words if its any help, but I know its not as helpful as sharing config as a file.

We still have nuxt 2 app running as our main service but we are migrating to nuxt 3 piece by piece while developing new features.

In simple terms nuxt 2 app is running on app.test -domain which is proxied to localhost:3000 with Laravel Valet. Nuxt 2 app is ran with vercel dev command to provide one more layer to proxy all app.test/2 requests to localhost:3005 where our Nuxt 3 app is running. This allows us to keep both projects separate but make them accessible via same domain.

Previous vite.server.hmr configuration kept hmr properties from bleeding to incorrect domain, but now it’s not working anymore and hmr websocket is trying to use incorrect properties.

Let me know if this is enough for you or if you need more to go on.

pi0 commented

Thanks for explaining the situation. Mainly i would like to know about your reverse proxy stack (nginx, apache, haproxy, caddy,...) so that i can provide you an example working snippet.

nikowonde commented

Sorry for the delay. So we are using Laravel Valet (which uses nginx under the hood) to provide the custom local domains and vercel dev environment to rewrite certain requests to different versisons of nuxt, but not sure how it handles those requests. I can edit nginx config per custom domain, but those configs are quite volatile as those might get overwritten by Valet.

  • 👍1