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

[connecteev]

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"
       },

_{This bug report is available on Nuxt community (#c9617)}

[connecteev]

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.

[connecteev]

In the console logs:

vendors.app.js:12916 warn [HMR] Update check failed: Error: Manifest request to /_nuxt/e12a06ad6b43baad4b84.hot-update.json timed out.
    at XMLHttpRequest.request.onreadystatechange (http://localhost:3000/_nuxt/runtime.js:92:16)
value @ vendors.app.js:12916
value @ vendors.app.js:12916
value @ vendors.app.js:12916
(anonymous) @ vendors.app.js:12916
handleError @ vendors.app.js:15731
cb @ vendors.app.js:15641
Promise.catch (async)
check @ vendors.app.js:15677
push../node_modules/webpack-hot-middleware/process-update.js.module.exports @ vendors.app.js:15636
processMessage @ vendors.app.js:15513
handleMessage @ vendors.app.js:15373
handleMessage @ vendors.app.js:15336
runtime.js:92 Uncaught (in promise) Error: Manifest request to /_nuxt/e12a06ad6b43baad4b84.hot-update.json timed out.
    at XMLHttpRequest.request.onreadystatechange (runtime.js:92)

[manniL]

Please add a repository or CodeSandbox that clearly shows the problem.

[connecteev]

@manniL the issue went away when I cleared all cookies, local storage and other "stuff" in chrome dev tools. So, I cant reproduce this anymore...but I know this problem was there and it happened on doing a "npm update". The pages simply refused to load from the server. I defer to you on what you want to do next.

[pi0]

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.

[connecteev]

Interesting @pi0 thanks for the extra color here.
So is the lesson that we should NOT run a production version (do a npm run build && npm run start) on localhost:3000 with pwa enabled?
Still seems like an issue in Nuxt, correct? Worth keeping the issue open or is it a duplicate?

As an aside, I'm seeing another intermittent issue on running "npm run dev' where the pages dont load. In that case I have to stop the terminal and run "npm run dev" again. That usually fixes it, but it's a minor annoyance.

[pi0]

This issue is directly related to HMR and Workbox. However, there was an open issue in pwa repository. I think for waiting for a workaround we may open an issue there or mention this as a known issue in the docs. Not really related to nuxt core.

As an aside, I'm seeing another intermittent issue on running "npm run dev' where the pages don't load.

Is this happening even without workbox being registered? A reproduction would be awesome. The #6186 should also potentially fix it for 2.9. you can early test it using nuxt-edge.

[connecteev]

@pi0 sounds good and makes sense to keep the PWA one open.

This 2nd issue:
intermittent issue on running "npm run dev' where the pages don't load.
has been happening since as far as I can remember, I can't think of the patterns when it triggers but I'll keep an eye out for it. I had never heard of workbox until this issue was reported yesterday...so no changes there from the basic nuxt installation.

Is it recommended we use Nuxt-edge or is there a way to try out 3.0 beta? Don't see a tag here for it.

[pi0]

@connecteev there is no nuxt 3 beta out yet. nuxt-edge is recommended for personal or projects with a small team working on. All nighly releases are fully automated tested but there might not be a proper changelog and integration tets.

[connecteev]

@pi0 cool. Will nuxt-edge become the nuxt-3 beta and eventually nuxt 3?

I did a npm install nuxt-edge
Does one need both of these in package.json for nuxt-edge?

     "nuxt": "^2.0.0",
    "nuxt-edge": "^2.9.0-26089340.de7ed24b",

or only the latter is enough and can I remove the first line? Btw, I couldn't find any good, official information on nuxt-edge from googling around. Is there a guide / more information on nuxt-edge and what is included. Thanks.

[pi0]

Will nuxt-edge become the nuxt-3 beta and eventually nuxt 3?

Not exactly. It is a preview of all _next_ release. Currently 2.9. And only nuxt-edge should be listed.

Regarding docs, we don't have them yet.

[connecteev]

@pi0 got it. I just tried a nuxt-edge installation and it keeps squawking about one error after another...not sure what I am missing or whether this just isnt ready for prime time yet.

> nuxt --port 3000


   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.9.0-26089340.de7ed24b          │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯


 ERROR  Cannot import module '@nuxt/webpack-edge'                                                                                                                                                 12:09:57

  at _import (node_modules/nuxt-edge/node_modules/@nuxt/cli-edge/dist/cli-command.js:75:17)
  at process._tickCallback (internal/process/next_tick.js:68:7)

$ npm install @nuxt/webpack-edge
npm WARN deprecated [email protected]: I wrote this module a very long time ago; you should use something else.
npm WARN [email protected] requires a peer of eslint@>= 5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.

+ @nuxt/[email protected]
added 9 packages from 40 contributors, removed 21 packages, updated 14 packages, moved 44 packages and audited 22823 packages in 29.953s
found 0 vulnerabilities

OneStepAtATime:kb_frontend_nuxt kunalpunjabi$ npm run dev

> nuxt --port 3000


   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.9.0-26089340.de7ed24b          │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                               12:11:01
ℹ Initial build may take a while                                                                                                                                                                  12:11:01

 FATAL  Cannot find module 'vue-meta/package.json'                                                                                                                                                12:11:01

  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
  at Function.Module._load (internal/modules/cjs/loader.js:562:25)
  at Module.require (internal/modules/cjs/loader.js:690:17)
  at require (internal/modules/cjs/helpers.js:25:18)
  at Resolver.requireModule (node_modules/@nuxt/core-edge/dist/core.js:629:26)
  at Builder.validateTemplate (node_modules/@nuxt/builder-edge/dist/builder.js:5630:38)
  at Builder.build (node_modules/@nuxt/builder-edge/dist/builder.js:5564:12)


   ╭───────────────────────────────────────────────────────╮
   │                                                       │
   │   ✖ Nuxt Fatal Error                                  │
   │                                                       │
   │   Error: Cannot find module 'vue-meta/package.json'   │
   │                                                       │
   ╰───────────────────────────────────────────────────────╯

[pi0]

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

[connecteev]

@pi0 Great thanks...that worked. Glad that my site still works with the latest and greatest version of nuxt.

While there are some glitches we encountered in this ticket, I have no issues right now. I'll come back to update this issue if I see anything is odd.

[connecteev]

This is not an issue anymore

[livelifelively]

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

[boctulus]

Same problem again today !

[guangshao]

Recently have encountered such a problem!
Has anyone solved it yet?

[cannc4]

Same problem here too.
Been having a lot of problem with nuxt in the past but not being able to hot-reload is a pretty big buzzkill.

[guangshao]

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

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

[xerosanyam]

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.

Thank you very much for the answer. Quoting your reply because it hasn't got enough attention.

[nithin270]

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.

Thank you. changed the port number. now it's working without any issue

[developius]

Stopping the service worker via devtools fixes it for me, but it still locks up periodically. Stopping the SW seems to unlock it again.

[liasica]

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

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

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

[berejznoy]

我 后面 发现 出现 热 跟 新 失败 的 原因
P 猜测 是 因为 和 电脑 电脑 内核 内核 内核 内核 当 当 当 当 的 的 的 的 的 的 的 的 直 直 直 直 直 直 直 直 直
直 我

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

Спасибо

[Dean-Christian-Armada]

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

[connecteev]

Hopefully these workarounds are temporary and the nuxt team looks into the stability issues....not good if this happens to production users.

[manniL]

Hopefully these workarounds are temporary and the nuxt team looks into the stability issues....not good if this happens to production users.

This issue has never happened in prod so far. The reason, as well as a workaround, is also known. There is nothing to worry about in production environments!

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.

[Dean-Christian-Armada]

Hopefully these workarounds are temporary and the nuxt team looks into the stability issues....not good if this happens to production users.

I agree with @manniL. This will only happen in local as well. You need to have both dev and prod environment with the same URL and port for this to happen.

[djlxiaoshi]

warn [HMR] Update check failed: Error: Manifest request to/_nuxt/e12a06ad6b43baad4b84.hot-update.json timed out

i have the same problem when i run dev with NODE_ENV=production, delete Cache Storage in browser an then run dev width NODE_ENV=development

[larrykkk]

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

it work for me

[gooqiao]

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

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

我认为是因为浏览器有连接数限制, 因为我看到浏览器会显示正在等待可用的套接字

[Arman-AP]

today I faced this problem, with nuxt-socket-io and nuxt.js and the problem was resolved when I removed
https: { key: fs.readFileSync(path.resolve(__dirname, 'server.key')), cert: fs.readFileSync(path.resolve(__dirname, 'server.crt')) }

or

host: '0.0.0.0',
from my nuxt.config.js (the server object),

Essentially the hot reloading would not work if I was on 192.168 and https, but either by itself was fine

anything idea what may be causing this?