fix: Unable to connect devtools to Nuxt (3.5.2)

[mateenmohsin]

🐛 The bug

I am trying to enable Devtool on Nuxt version 3.5.2 using Yarn.
According to documentation Devtool is compatible with this version.
But it is in retrying state (Disconnected from Server).

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-shwpss

🌈 Expected behavior

Devtool should be enabled and working for Nuxt 3.5.2 version.

ℹ️ Additional context

No response

[desenvolvimento02jocc]

Same happens on 3.5.3

[ptolios]

Same on 3.6.5

[ptolios]

For me the problem was resolved after running
yarn upgrade

[EvgenyWas]

For me the problem was resolved after I ran

yarn upgrade

Yes, for the latest version of Nuxt the devtools are working fine, but for us it's quite costly and we'd like to stay on the current version. It should be compatible with other versions as it's written in the doc.

[antfu]

This is because we are using a new Vite API to detect the connection status, where Nuxt 3.5.2 doesn't have the latest Vite available. It should be fixed in the next release

[NyllRE]

@antfu I still have this issue with me, in the server console it gives:

[Vue Router warn]: No match found for location with path "/@vite/client"

and the devtools is just displaying an animation of the nuxt logo with these errors in the browser:

GET http://localhost:3000/@vite/client net::ERR_ABORTED 404 (Page not found: /@vite/client)

[vite-plugin-hot] Failed to import "/@vite/client"

Uncaught (in promise) Error: Unable to connect to devtools

Uncaught (in promise) Nuxt Devtools client injection failed

Uncaught Error: [birpc] timeout on calling "getOptions"

Note: this error happens on my home PC but it works fine on my laptop, the problem might be something from my pc maybe firewall or something but I have no idea how to troubleshoot it