nuxt: Instability problems: Nuxt.js server responds very slowly on local / dev environments

Version

v2.8.1

Reproduction link

http://jsfiddle.net

Steps to reproduce

Just run npm update, then load any pages on the site (on dev / localhost), and notice: many pages either dont load, or reload. The console is also flooded with messages. I’ve included the diff’d package-lock.json.

What is expected ?

Should not be seeing any slowness.

What is actually happening?

After an npm update, this issue came back: https://github.com/nuxt/nuxt.js/issues/3566

Nuxt.js server responds very slowly, even on local / dev environments. The console is flooded with workbox messages, and a lot of pages on my site don’t load, or reload.

Something broke because of the updated package-lock.json below.

Using CacheFirst to respond to '/_nuxt/icons/icon_64.9mld2VBMsQ$.png'  Router is responding to: /__webpack_hmr/client
diff --git a/package-lock.json b/package-lock.json
index 1ea16ec..5d84ccd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5914,9 +5914,9 @@
       }
     },
     "jpeg-js": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.3.5.tgz",
-      "integrity": "sha512-hvaExqwmQDS8O9qnZAVDXGWU43Tbu1V0wMZmjROjT11jloSgGICZpscG+P6Nyi1BVAvyu2ARRx8qmEW30sxgdQ=="
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.3.6.tgz",
+      "integrity": "sha512-MUj2XlMB8kpe+8DJUGH/3UJm4XpI8XEgZQ+CiHDeyrGoKPdW/8FJv6ku+3UiYm5Fz3CWaL+iXmD8Q4Ap6aC1Jw=="
     },
     "js-base64": {
       "version": "2.5.1",
@@ -9334,6 +9334,16 @@
         "strip-indent": "^1.0.1"
       }
     },
+    "reduce-css-calc": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.6.tgz",
+      "integrity": "sha512-+l5/qlQmdsbM9h6JerJ/y5vR5Ci0k93aszLNpCmbadC3nBcbRGmIBm0s9Nj59i22LvCjTGftWzdQRwdknayxhw==",
+      "dev": true,
+      "requires": {
+        "css-unit-converter": "^1.1.1",
+        "postcss-value-parser": "^3.3.0"
+      }
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -10343,13 +10353,13 @@
       }
     },
     "string.prototype.trim": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz",
-      "integrity": "sha1-0E3iyJ4Tf019IG8Ia17S+ua+jOo=",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.0.tgz",
+      "integrity": "sha512-9EIjYD/WdlvLpn987+ctkLf0FfvBefOCuiEr2henD8X+7jfwPnyvTdmW8OJhj5p+M0/96mBdynLWkxUr+rHlpg==",
       "requires": {
-        "define-properties": "^1.1.2",
-        "es-abstract": "^1.5.0",
-        "function-bind": "^1.0.2"
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.13.0",
+        "function-bind": "^1.1.1"
       }
     },
     "string_decoder": {
@@ -10484,9 +10494,9 @@
       }
     },
     "tailwindcss": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.0.6.tgz",
-      "integrity": "sha512-hhdvXpnlYNnxfZCpldMypSWRzgmoQbKBy3namGlsP0Gs+qM8EwF3DBVUPoq8wJYbBFjzrgatE4czWJ6f12Y9+Q==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.1.0.tgz",
+      "integrity": "sha512-hcxY5MUrY/LcdsX4Xr2aOF24eF4HaxDbHCbDu3W2+bCJRsXRhJmZfAgjipjsyhZult0YAa9HFp14xRXMqwUYTw==",
       "dev": true,
       "requires": {
         "autoprefixer": "^9.4.5",
@@ -10501,7 +10511,8 @@
         "postcss-js": "^2.0.0",
         "postcss-nested": "^4.1.1",
         "postcss-selector-parser": "^6.0.0",
-        "pretty-hrtime": "^1.0.3"
+        "pretty-hrtime": "^1.0.3",
+        "reduce-css-calc": "^2.1.6"
       },

<div align="right">This bug report is available on Nuxt community (#c9617)</div>

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 48 (7 by maintainers)

Most upvoted comments

The problem happes when you run your production version on localhost:300 with pwa/workbox enabled and then run dev on same port without unregister service worker.

This is a long known issue which happens for webpack HMR already registered workbox.

Faced the same issue today. Issue seems to do with websockets and their availability. After restarting the system, it worked fine.

Deleting and Unregistering the service worker did the fix for me. Please see the photo below

Screenshot 2020-05-18 at 09 41 05

There might be something wrong with npm/yarn. Try cleaning node_modules and lock file. PS: @nuxt/… packages should be automatically installed.

Having the same issue for several days now, changing the Nuxt port to something other than 3000 fixed it for me

"scripts": {
    "dev": "nuxt --port 5050"
}

Update: things seem to be working fine if you run “npm run build && npm run start”, though the logs still show lots of messages from workbox.

On running npm run dev, however, none of the pages are loading.

I am seeing this same issue with a new Nuxt project. I have no custom Webpack setup, and the only additional settings for the Nuzt config are for the @nuxtjs/auth module.

Does anyone have more info on what is going on. Having to restart the dev server every few minutes is brutal.

ran into very similar timeout issues while using hot reload.

another data point:

  • wiping node_modules and reinstalling dependencies did not help
  • didn’t see any service workers listed as mentioned in workaround above, but turning on ‘update on reload’ seemed to help? unclear.

Edit/Update

Nope - that didn’t work and the issue has returned. Will report additional findings if possible…

I noticed that for me, only on chrome, but localhost will have those nuxt timeout issue with “Manifest request to /_nuxt/5d8bf94471479c1c5ddc.hot-update.json timed out.” but it goes away if I replace localhost with 127.0.0.1, I don’t know much about those loopback interface not sure why this is the case only for chrome. This issue doesn’t seem to show in firefox nor safari.

Just few seconds ago all worked fine for me, but now appeared this issue. I did not changed any nuxt or project config, just only edited some components and pages as usual.

I restarted google chrome and the problem disappeared.

我后面发现出现热跟新失败的原因

我猜测是因为和电脑cpu只有两个内核, 当我开第三个网页的时候就会出现热更新失败的现象, 一直保持两个页面就不会出现这种现象 这只是我的猜测

确实是这个问题。。。但是我电脑是8核的。。。也是开三个就热更卡死