nuxt / nuxt

The Intuitive Vue Framework.
https://nuxt.com
MIT License
54.24k stars 4.96k forks source link

update docs to explain configuring vite hmr #25335

Open hutchic opened 8 months ago

hutchic commented 8 months ago

Environment

------------------------------
- Operating System: Linux
- Node Version:     v18.19.0
- Nuxt Version:     3.7.4
- CLI Version:      3.10.0
- Nitro Version:    2.6.3
- Package Manager:  yarn@1.22.21
- Builder:          -
- User Config:      vite, ssr
- Runtime Modules:  -
- Build Modules:    -
------------------------------

Reproduction

Reproduction github PR https://github.com/hutchic-org/nuxt-37-ws/pull/1

git clone git@github.com:hutchic-org/nuxt-37-ws.git
cd nuxt-37-ws
make run
ctrl^c
make exec
netstat -tupln

expected result

netstat -tupln
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name    
tcp        0      0 0.0.0.0:3000            0.0.0.0:*               LISTEN      19/node             
tcp        0      0 127.0.0.1:39775         0.0.0.0:*               LISTEN      30/node             
tcp6       0      0 :::22301                :::*                    LISTEN      30/node     

actual result

netstat -tupln
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name    
tcp        0      0 127.0.0.1:39931         0.0.0.0:*               LISTEN      30/node             
tcp        0      0 0.0.0.0:3000            0.0.0.0:*               LISTEN      19/node        

Describe the bug

The following nuxt.config.ts on 3.7.3 gets a node process active on the port specific by port but that's no the case as of 3.7.4

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  vite: {
    server: {
      hmr: {
        protocol: 'ws',
        port: 22301,
        clientPort: 22301,
        path: 'hmr/',
        timeout: 3,
      }
    }
  },
  ssr: false,
})

Additional context

No response

Logs

No response

Soviut commented 8 months ago

Possibly related to this Vite issue? https://github.com/vitejs/vite/issues/3737

Apparently middlewareMode: 'ssr' is deprecated and should just be middlewareMode: true

hutchic commented 8 months ago

@Soviut still no joy though that issue looks very closely related

hutchic commented 8 months ago

I ran a git bisect reproducing the issue in the playground and it says https://github.com/nuxt/nuxt/commit/f842da5b905b2a4f0dd28dfa9dfbb51fbb0de3de is the commit at fault

Further narrowed it to the nuxi upgrade from 3.8.4 to 3.9.0

manniL commented 8 months ago

Might be related: https://github.com/nuxt/cli/pull/184/ & https://github.com/nuxt/cli/pull/189

hutchic commented 8 months ago

@manniL that looks to have done it.

can / should we ninja edit the relevant docs / CHANGELOG?

nicholaspufal commented 3 months ago

FYI was just bitten by this as well in my org, running Nuxt 3.11.2

Even when using the default Vite port I was getting weird errors in the browser as the host was being overridden to localhost and port was undefined

The env variable NUXI_DISABLE_VITE_HMR that manniL shared that disables the override behavior did it for me too.

I think we should more explicitly document this behavior as it was pretty obscure to me that the expected default Vite HMR wasn't respected by Nuxt 3 and when trying to configure it myself it was still being overriden by a Nuxt hook, requiring knowledge of this NUXI_DISABLE_VITE_HMR env var to fix it.

Are we waiting for anything else to have this documented in the official docs?

DMaxter commented 2 weeks ago

Any time estimation on when this can be achieved. I've been trying to make HMR work for some weeks and have no clue.

I already set the NUXI_DISABLE_VITE_HMR and middlewareMode: true and if I don't set anything else, I receive a ERROR WebSocket server error: Port is already in use in the dev console. If I try to set a port on vite.server.hmr.port the error goes away but still no HMR