nuxt: Instability problems: Nuxt.js server responds very slowly on local / dev environments
Version
Reproduction link
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)
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
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
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:
node_modulesand reinstalling dependencies did not helpEdit/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.
确实是这个问题。。。但是我电脑是8核的。。。也是开三个就热更卡死