Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
connecteev opened this issue Aug 9, 2019 · 48 comments

Comments

@connecteev
Copy link

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: #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)
@ghost ghost added the cmty:bug-report label Aug 9, 2019
@connecteev connecteev changed the title Instability problems: Nuxt.js server responds very slowly, even on local / dev environments Instability problems: Nuxt.js server responds very slowly on local / dev environments Aug 9, 2019
@connecteev
Copy link
Author

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
Copy link
Author

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
Copy link
Member

manniL commented Aug 9, 2019

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

@connecteev
Copy link
Author

connecteev commented Aug 9, 2019

@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
Copy link
Member

pi0 commented Aug 9, 2019

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
Copy link
Author

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
Copy link
Member

pi0 commented Aug 9, 2019

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
Copy link
Author

@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
Copy link
Member

pi0 commented Aug 9, 2019

@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
Copy link
Author

@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
Copy link
Member

pi0 commented Aug 9, 2019

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
Copy link
Author

@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 flatten@1.0.2: I wrote this module a very long time ago; you should use something else.
npm WARN eslint-plugin-prettier@3.1.0 requires a peer of eslint@>= 5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-vue@5.2.3 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN vue-eslint-parser@5.0.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.

+ @nuxt/webpack-edge@2.9.0-26089340.de7ed24b
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
Copy link
Member

pi0 commented Aug 9, 2019

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

@connecteev
Copy link
Author

@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
Copy link
Author

This is not an issue anymore

@livelifelively
Copy link

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

@boctulus
Copy link

Same problem again today !

@guangshao
Copy link

guangshao commented Feb 17, 2020

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

@cannc4
Copy link

cannc4 commented Feb 28, 2020

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
Copy link

guangshao commented Feb 28, 2020

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

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

@xerosanyam
Copy link

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.

@nithinkvarrier
Copy link

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
Copy link

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
Copy link

liasica commented May 2, 2020

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

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

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

@berejznoy
Copy link

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

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

Спасибо

@Dean-Christian-Armada
Copy link

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

Screenshot 2020-05-18 at 09 41 05

@connecteev
Copy link
Author

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

@manniL
Copy link
Member

manniL commented May 18, 2020

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
Copy link

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
Copy link

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
Copy link

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

Screenshot 2020-05-18 at 09 41 05

it work for me

@gooqiao
Copy link

gooqiao commented Jul 22, 2020

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

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

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

@armannnnnnnnnnn
Copy link

armannnnnnnnnnn commented Aug 8, 2020

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?

@vedmant
Copy link

vedmant commented Feb 8, 2021

I have the same issue, page takes forever to load, it works only after I re-run yarn dev, also code change doesn't reflect. Clearing cookies and all site data helps for a while, then eventually problems start again. I'm using the latest Nuxt, the issue might be connected to large cookies generated by AWS Cognito SDK.

@indirectlylit
Copy link

indirectlylit commented Feb 19, 2021

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...

@indirectlylit
Copy link

image

@msoler75
Copy link

msoler75 commented Feb 24, 2021

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.

@CoreyT355
Copy link

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.

@maanex
Copy link

maanex commented Apr 13, 2021

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

@CloudMunk
Copy link

CloudMunk commented Jul 12, 2021

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

This fixed it for me, thank you!

@andreichirkov
Copy link

I'm changing port in package.json and .env file
ex: http://localhost:3000/ to http://localhost:3001/

It's works

@yangfan-coder
Copy link

。您需要拥有具有相同 URL 和端口的 dev 和

I don't quite understand. Would you please tell me in detail

@maximehamou
Copy link

maximehamou commented Jun 28, 2022

Hello,
I've change the port from http://localhost:3000 to http://localhost:8000.
It was working for a few seconds and now it doesn't working again.

@pencilcheck
Copy link

pencilcheck commented Jun 29, 2022

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.

@maximehamou
Copy link

maximehamou commented Jun 29, 2022

I have those errors by replacing localhost with 127.0.0.1 or not :

For now it's work (with 127.0.0.1) but given that I still have the error, I think that it's going to start again. I have not the error on Chrome (just on Safari) but on Chrome sometimes it was not working.

@maximehamou
Copy link

That's it, it starts again...

@1047415098
Copy link

1047415098 commented Nov 10, 2022

image

1668056896889

nuxt2,只打开了一个页面,然后刷新一下就一直显示在加载中了。也一直都加载不出来,请问怎么处理啊?这个问题

@ghost
Copy link

ghost commented Sep 2, 2023

I have a similar problem, my Nuxt v2.17.1 project, when I open it from Chrome it stays loading (load spinner appears), and it takes 3-15 seconds to fully load the app. I have SSR disabled. In incognito and guest mode this does not happen or in other browsers. It is worth mentioning that I have no extensions installed. I tried over and over again clearing cache and all browser data but the same thing keeps happening.

My version of Node.js v16.16.0

In fact, I create a whole new project from scratch and the same thing happens: I get the Loading spinner.

I have uninstalled and reinstalled Chrome several times from scratch (even older versions), I have even removed the keys that the browser generates in regedit but the problem persists.

In my nuxt.config.js I set the load value to 'false' and it still shows up.

I tried on another computer and the load is immediate, the spinner is not shown. So this "error" is kind of weird.

I tried changing the localhost port and nothing.

I tried with Postman and the response is immediate, the only drawback is with Chrome.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests