nuxt: Homepage doesn't stop loading and none of the nuxt-links are working
Version
Reproduction link
Steps to reproduce
Page doesn’t stop loading in latest version of nuxt-edge. This wasn’t a problem previously, something broke. Screenshot: https://1ce.org/1#r1ZaHcdSS
I tried rerunning npm run dev and restarting the server a few times. The issue persists.
> nuxt --port 3000
╭─────────────────────────────────────────────╮
│ │
│ Nuxt.js v2.9.0-26104328.b22e0543 │
│ Running in development mode (universal) │
│ │
│ Listening on: http://localhost:3000/ │
│ │
╰─────────────────────────────────────────────╯
Note: even on removing ALL the code from the index.vue file, this still happens.
What is expected ?
Pages should load quickly. The nuxt-links should load when clicked.
What is actually happening?
Pages NEVER finish loading…even if npm run dev is restarted. This happens whether I use nuxt-edge or nuxt 2.9.2
I have to click ‘x’ on chrome to make the page stop loading. If I then click on any nuxt-link, it does not load. If I hard-refresh the page, the page does not load and spins forever. Note: even on removing ALL the code from the index.vue file, this still happens.
This instability is incredibly frustrating.
Eventual message seen on page timeout (I had clicked on /signup nuxt-link and eventually saw this message)
Something went wrong here.
Loading chunk pages/signup failed. (timeout: http://localhost:3000/_nuxt/pages/signup.js)
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 12
- Comments: 44
I had the same issue, after some changes the site didn’t load anymore, localhost:3000 was spinning forever. The issue was related with an initial Axios call during startup in combination with a wrong
baseURLsetting innuxt.config.js. My quess is that the initial call went wrong (API not reachable) but instead of throwing an exception or running into a timeout, nothing happens so it just seems the app hangs up. After correcting the baseURL, everything runs smooth again.I had the same problem. Vue.js devtools chrome extension!!! I don’t have enough info how to resolve it properly but removing it from chrome made my Nuxt app alive.
Vue.js devtools chrome extension
In this GIFs you can see differences happening while browsing through the two versions. The old version is very smooth and fast.
Version 2.8.1:
Version 2.9.2
Version 2.9.2 after ~ two minutes of browsing
That module uses a global mixin to add head info, that will slow down your site a lot indeed (for the why see the earlier referenced nuxt-i18n seo page).
@AndrewBogdanovTSS do you by any chance also use that module?
After updating, I had the same bug as well. We reverted to previous version and everything works fine.
Thank’s @mjzarrin, I had the same problem… I can confirm removing Vue.js devtools chrome extension is correcting the problem for me too !
@AndrewBogdanovTSS
Why use a mounted hook and not the head method in the default layout?The newaddAppfunctionality inv2.3is mostly meant for modules etc which are not Vue components. If you already are in a Vue component, use the head method.I think I’ve made some progress myself as well, I think I can (partially) reproduce this issue with one of my own projects. Looking at this project, I think your metaInfo issue is actually an effect of the real issue because I also see the number of VueComponents growing and growing (which it shouldnt). It could be that if VueComponents are not correctly destroyed that vue-meta will keep accessing them when the metaInfo needs to be updated which could cause your error.
Still debugging though, so nothing is sure yet.
@ruslankonev this issue is not limited to a Dev mode, I also have it in production. Try to lock
vue-metato v. 1.6.0 and let us know if this issue is still reproducible for you