Hot Reload make page not load anything till restart of server

aldarund
428
aldarund
commented 5 months ago

Version

v2.4.0

Reproduction link

https://github.com/nuxt/nuxt.js

Steps to reproduce

In chrome after some hot reloads page stop loading at all and only anonymous window work.
Terrible developing experience.

What is expected ?

No stuck page behaviour

What is actually happening?

stuck page behaviour

bug
0
manniL
4.6k
manniL
commented 5 months ago

Maybe disable caching of /_nuxt/HASH_HERE.hot-update.json could fix the problem ๐Ÿค”

0
manniL
4.6k
manniL
commented 5 months ago

A temporary workaround:

  • Firefox: Use Forget this page
  • Chrome: Reset the service worker

How the problem can be reproduced:

  • npm run build && npm run start
  • Open the page
  • npm run dev (Don't close the page where your project is running, URL's must be equal in dev and prod mode)
  • Click around the page to trigger loading while the service worker is still active and not reset
  • Edit sth. in your editor to trigger HMR
  • See flickering

Why didn't it happen before?

I'd bet on Workbox 3. With the new versions the dev/prod build differences have been greatly changed.

Sophisticated workarounds?

  • Don't cache hot reload files.
    Problem: Doesn't fully resolve the problem but makes it way better! However, in the worst case scenario, you are loading the full dev version (including non-hashed nuxt files that'll be cached).

  • Don't cache all dev nuxt files.
    Problem: We'd need a list and a decent check (that might influence live performance)

  • Force a full reload of the page when re-deploying application (nuxt-side)
    Problem: Not sure if technically possible. This would likely be the best solution, so the SW is definitely flushed out. ๐Ÿค”

  • Don't cache all /_nuxt/ (publicPath) resources by default
    Problem: Ugly and possible efficiency loss.

  • Add an identifier to all dev files
    Problem: Nuxt-side solution, affecting many ppl

cc @galvez @pi0

0
pi0
23.5k
pi0
commented 9 days ago

This problem should be finally fixed with 3.0.0-beta.1.

  1. A regex extension added to ignore webpack HMR from workbox (tests: https://github.com/nuxt-community/pwa-module/blob/dev/test/hmr.js).

  2. added [sw.dev.js] that fast claims all tabs and disables most of workbox.

0
manniL
4.6k
manniL
commented 9 days ago

@pi0 Hero <3

0
Informations
Bug Report โ€ข Open
#c63 - Created 5 months ago