Nuxt listen hook is returning wrong server from 3.7.0

[TechAkayy]

Environment

• Operating System: Darwin
• Node Version: v18.12.1
• Nuxt Version: 3.7.0
• CLI Version: 3.7.3
• Nitro Version: 2.6.2
• Package Manager: npm@8.19.2
• Builder: -
• User Config: modules, devtools
• Runtime Modules: ()
• Build Modules: -

Reproduction

Worked before in 3.6.5 - https://github.com/TechAkayy/nuxt-365
Stopped working in 3.7.0 - https://github.com/TechAkayy/nuxt-370

Clone & install deps in both repo. Start dev-server. Check console in the editor - nuxt-365 logsDevserver running at: 3000, but nuxt-370 logs Devserver running at: 60225 (port numbers might be different)

Describe the bug

I'm a module author, and I use the nuxt listen hook to know which port is the devserver running.

The above reproduction is minimal and only difference is the nuxt version used (3.6.5 vs 3.7.0)

Nuxt listen hook returned correct port number in 3.6.5, but doesn't from 3.7.0 - https://nuxt.com/docs/api/advanced/hooks#nuxt-hooks-build-time

Please refer to the inline module in nuxt.config.ts, and this is the way I use the hook:

      nuxt.hook('listen', async (listenerServer) => {
        // @ts-ignore
        const port = listenerServer.address().port
        console.log(`Devserver running at: ${port}`)
      })

Additional context

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

Logs

No response

[TechAkayy]

If listen hook's definition has changed, can you advise how I can fetch the port number of the dev-server. Thanks.

[jeddygong]

I have a similar issue when creating the Nuxt module.

On Nuxt2.6.5, I can use nuxt.options.devServer.port to obtain the service port number.

However, on Nuxt 3.7. x, this is not possible, so I am using the runtime environment process.env__NUXT_DEV_LISTENER__ And process.env__NUXT_DEV_LISTENER__ To obtain the port.

but I think using it this way on Nuxt 3.7. x is so bad.

Nuxt 2.6.5：

nuxt.hook('vite:serverCreated', (_: unknown) => {
    // good
    const port = nuxt.options.devServer.port // Random port number: 3000
    
})

Nuxt 3.7.x

nuxt.hook('vite:serverCreated', (_: unknown) => {
    // bad
    const ENV_URL = process.env.__NUXT_DEV_PROXY__ || process.env.__NUXT_DEV_LISTENER__
    const devUrl = JSON.parse(ENV_URL || '{}')?.url // http://localhost:3000/
    const devPort = devUrl.match(/:(\d+)\//)[1] // 3000
    
    const port = nuxt.options.devServer.port // Random port number: 51820
    
 })

[pi0]

Sorry for trouble this change has made for you.

The new post and address actually refer to real/internal dev server. Port 3000 is used by a proxy (and can be a remote URL or HTTP server).

If you need the public interface address of dev server, you can better rely on listener.url or listener.urls (and can part it using new URL() to access proto and port)

Let me know if can help further (also linking your modules if public, would be helpful)

[TechAkayy]

Here is what I do to achieve a similar result in a Vite-based vue vanila project. For Nuxt, I used the listen hook to achieve the same. So, basically I want to know how to do this now with Nuxt.

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'get-port',
      configureServer(_server) {
        _server.httpServer.on('listening', () => {
          console.log(_server.httpServer.address())
          // logs { address: '::1', family: 'IPv6', port: 5173 }
        })
      },
    },
  ],
})

[pi0]

Try this to access all possible URLs:

export default defineNuxtConfig({
  hooks: {
    listen: async (server, listener) => {
      const urls = await listener.getURLs();
      console.log(urls);
    },
  },
});

[TechAkayy]

Thanks Pooya. I tried at my end, and it didn't log 3000. I'm on nuxt@3.7.3. Should I be updating something else, or try on edge?

[TechAkayy]

I have updated my reproduction with the above - https://github.com/TechAkayy/nuxt-370

[pi0]

Can you try running same project with npx nuxi-edge@latest dev?

[TechAkayy]

Edge didn't help.

[TechAkayy]

Thanks Pooya :-)

[TechAkayy]

Hi @pi0,

I tried the edge npx nuxi-edge@latest dev --host. While getURLs is returning fine, listener.url is getting logged as http://:3002/

[pi0]

Thanks for heads up yeah i also noticed it while testing. Seems an upstream issue with listhen.

[TechAkayy]

getURLs is good enough for my situation, thanks for looking into this :-)

[jeddygong]

nuxt.hook('vite:serverCreated', (_: unknown) => {
// bad
const ENV_URL = process.env.NUXT_DEV_PROXY || process.env.NUXT_DEV_LISTENER
const devUrl = JSON.parse(ENV_URL || '{}')?.url // http://localhost:3000/
const devPort = devUrl.match(/:(\d+)//)[1] // 3000

const port = nuxt.options.devServer.port // Random port number: 51820

})

Hi @pi0 , How should I make dev proxy port available for vite:serverCreated hook? Thx.