cli icon indicating copy to clipboard operation
cli copied to clipboard

ERR_CONNECTION_REFUSED In a large application in dev mode

Open Flashantik opened this issue 6 months ago • 4 comments

Environment


  • Operating System: Darwin
  • Node Version: v18.19.0
  • Nuxt Version: 3.10.0
  • CLI Version: 3.10.0
  • Nitro Version: 2.8.1
  • Package Manager: [email protected]
  • Builder: -
  • User Config: srcDir, devtools
  • Runtime Modules: -
  • Build Modules: -

Reproduction

https://github.com/Flashantik/nuxt-3.10.-slow-dev-mode

Describe the bug

We have a large application, however after updating [email protected] dev mode started to slow down a lot and often cannot render all components I was able to recreate this behavior in a clean project with a lot of simple components...

To get the error all you need to do is run npm run dev and go to localhost:3000. Many components in the network will be in pending mode and after some time 500 error or ERR_CONNECTION_REFUSED error will be displayed. If there is no error in the console it is enough to reload the page.

build mode works fine. If you install [email protected] there are no such problems with dev mode. Screenshot 2024-02-05 at 21 49 46

Additional context

No response

Logs

Client logs: 

vue-router.mjs:3471 TypeError: Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue
triggerError @ vue-router.mjs:3471
(anonymous) @ vue-router.mjs:3184
nuxt.js:98 [nuxt] error caught during app initial
[Vue Router warn]: uncaught error during route navigation:

[nuxt] error caught during app initialization TypeError: Failed to fetch dynamically imported module

Failed to load resource: net::ERR_CONNECTION_REFUSED
Failed to load resource: net::ERR_SOCKET_NOT_CONNECTED
Hydration class mismatch

Server Logs (sometimes) 

ERROR  [unhandledRejection] connect ETIMEDOUT 127.0.0.1:61574                                                   9:49:52 PM

  at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1595:16)

Flashantik avatar Feb 05 '24 16:02 Flashantik

Same problem occurs on nuxt 3.11.1 with nitropack 2.9.X

ThomasBerneHCSE avatar Mar 19 '24 14:03 ThomasBerneHCSE

Same problem occurs on nuxt 3.11.1 with nitropack 2.8.X

Yes, but it's hardly a nitropack problem. [email protected] works fine with [email protected], but [email protected] with [email protected] is already slow and buggy. This continues on [email protected].

Flashantik avatar Mar 27 '24 08:03 Flashantik

This is happening in our project that isn't that big even (±400 components). It does indeed seem to be mainly a Nuxt issue, as @Flashantik pointed out in https://github.com/nuxt/nuxt/issues/23832.

joaomarcelofm avatar Apr 03 '24 16:04 joaomarcelofm

This is happening in our project that isn't that big even (±400 components). It does indeed seem to be mainly a Nuxt issue, as @Flashantik pointed out in nuxt/nuxt#23832.

It's not just about the components, but also about composables, utils pages, and so on. Each file in dev mode is loaded separately on the network, I think this is the problem..

By the way, as a solution to the problem, I found using bun instead of node, it is capable of consistently delivering about 10,000 files

Flashantik avatar Apr 04 '24 07:04 Flashantik