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

[edge] Deployment of new version breaking site for live users. ( Loading chunk {n} failed error) #3389

Closed
aldarund opened this issue May 29, 2018 — with CMTY · 44 comments
Closed

Comments

Copy link
Contributor

@aldarund aldarund commented May 29, 2018 — with CMTY

Version

v1.4.0

Reproduction link

None

Steps to reproduce

This happens on a live site, production deployed not a dev. The sequence of events following:

User opened the site home page
New version of the app was deployed to web servers
User clicked a link to another page within the nuxt SPA
User saw Loading chunk {n} failed message instead of the new page content
https://i.imgur.com/AO7gX9h.png

Any site deploy could break the SPA for live users and cause them to need a refresh.

This should be handled properly by nuxt, maybe something like automatically refresh in such cases. This is just really frustrating and bad behavior for users

What is expected ?

No error displayed to user. Site autoreload or whatever will work here

What is actually happening?

User see some cryptic error

Afaik nuxt 1.4 have same behaviour

This bug report is available on Nuxt.js community (#c7171)
@cmty cmty bot added the bug-report label May 29, 2018
@lucasmpaim
Copy link

@lucasmpaim lucasmpaim commented Jun 18, 2018

Any update on this?

Loading

@aldarund
Copy link
Contributor Author

@aldarund aldarund commented Jun 18, 2018

@lucasmpaim you can use workaround like this for now -> #742 (comment)

Loading

@Atinux
Copy link
Member

@Atinux Atinux commented Aug 6, 2018

Everytime you will rebuild your app, some filenames will change, the solution is to push your bundle to a CDN to avoid having not found file which lead a a chunk error.

We may try to find a solution to hard-reload the page when this error happens, any PR attemps will be really appreciated :)

Loading

@qm3ster
Copy link
Contributor

@qm3ster qm3ster commented Aug 20, 2018

@Atinux what are you talking about, "hard-reload" 😱
Only seamless hotModuleReloading without memory leaks and with Vuex migration!

Loading

@amorino
Copy link

@amorino amorino commented Sep 18, 2018

Any update on this?

Loading

@ahus1
Copy link
Contributor

@ahus1 ahus1 commented Oct 20, 2018

For now I use the following workaround by adding this to the error template: it will reload the page. The user will be again on the page where she/he started the navigation. She/he can then retry the interaction.

It adds a hash to the URL to avoid infinite reloads. The hash will be automatically removed on the next successful navigation.

This will might work for you as well until #3940 is released. Tested with Nuxt 2.2, but should work with earlier versions as well.

    mounted: function () {
      if (this.error.statusCode === 500
        && /^Loading chunk [0-9]+ failed/.test(this.error.message)
        && window.location.hash !== '#retry') {
        // the chunk might no longer be available due to a recent redeployment of the page
        // mark the page to don't trigger reload infinitely
        window.location.hash = '#retry'
        window.location.reload(true)
      } 

Comments to improve the workaround are welcome!

Loading

@stale
Copy link

@stale stale bot commented Nov 10, 2018

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

Loading

@stale stale bot added the stale label Nov 10, 2018
@stale stale bot closed this Nov 17, 2018
Bugs 🐞 automation moved this from Open to Fixed Nov 17, 2018
@pi0 pi0 reopened this Nov 17, 2018
Bugs 🐞 automation moved this from Fixed to Open Nov 17, 2018
@stale stale bot removed the stale label Nov 17, 2018
@sumeshkmp
Copy link

@sumeshkmp sumeshkmp commented Dec 5, 2018

Have seen this issue on V2.2.0

Loading

@magisters-cc
Copy link

@magisters-cc magisters-cc commented Dec 8, 2018

Up, one more.

Loading

@josepjaume
Copy link

@josepjaume josepjaume commented Jan 22, 2019

This is definitely an issue.

Loading

@purpleow1
Copy link

@purpleow1 purpleow1 commented Feb 8, 2019

Is this issue fixed in version 2.4.0?

Loading

@ahus1
Copy link
Contributor

@ahus1 ahus1 commented Feb 8, 2019

yes (i tried it, the nuxt SPA will reload once it doesn't find a JavaScript resource it tries to load. This way it will load the most recent app from the server that will have all needed resources available)

Loading

@ameistad
Copy link

@ameistad ameistad commented Mar 2, 2019

I'm experiencing this on Nuxt version 2.4.5, but only in development.

Loading

@unr
Copy link

@unr unr commented Mar 4, 2019

Currently experiencing this live on 2.4.5

Previously, I had used this error/refresh solution

But this no longer seems to work? I'm simply having errors logged about chunks again, and I can't seem to get this working.


On the topic of putting nuxt files on a CDN..., how would that work with globally distributed lamdas like now.sh?

Loading

Copy link

@unr unr commented Apr 25, 2019 — with CMTY

That is exactly how my app is deployed currently. Switching the current app during deploy is what seems to cause our chunking errors.

In the process of switching to Now.sh for deployments... haven’t seen the issue on that platform yet.

Loading

@zajca
Copy link

@zajca zajca commented Apr 25, 2019

I'm using dokku for deploy so each instance is in new container.

Loading

@AndrewBogdanovTSS
Copy link

@AndrewBogdanovTSS AndrewBogdanovTSS commented Aug 14, 2019

Also having this issue although I also use zero time deployment described here https://link.medium.com/yyfdzAE0aW . The issue disappear only when hard page reset is done. Experiencing this with Nuxt 2.8.1

Loading

@AndrewBogdanovTSS
Copy link

@AndrewBogdanovTSS AndrewBogdanovTSS commented Nov 25, 2019

I'm using nuxt-polyfill and I experience an issue of Loading chunk {n} failed for chunks that contain polyfill code and which is loading dynamically

Loading

@buremba
Copy link

@buremba buremba commented Nov 25, 2019

Did anyone find a solution to this problem? We don't want to use CDN as we deploy a few times to the prod during the day. Most of the users keep the tab open most of the day so we're thinking of using PWA for this use-case but couldn't find any tutorial it yet. :/

Loading

@robyedlin
Copy link

@robyedlin robyedlin commented Nov 27, 2019

@buremba Why does deployment multiple times during the day prevent you from using a CDN?

The only thing I've seen that really worked is to deploy js files to s3 (or any file storage), then point the publicPath to cloudfront's endpoint (or whatever CDN you choose that points to the storage bucket). This process is part of a post-deploy script, which heroku and other PaaS tend to offer.

If you don't want users fetching old versions of your app, then the best solution is to detect the chunk error and hard reload the page.

Loading

@buremba
Copy link

@buremba buremba commented Nov 27, 2019

@robyedlin We currently hard-reload in case the assets return 404 but that's not reliable and convenient IMO.

  1. Most of our users use the app as if they're using a desktop application, they open the app and use it occasionally during the day. Forcing them to reload the page breaks their workflow in some cases.

  2. While we do offer the SaaS version, we also offer the on-premise version of the app so we want to keep the infrastructure as simple as possible. We don't want to force the customers to use S3 or any specific CDN just for this problem because it becomes hard to maintain for us and also for them. Instead, if that's possible to solve this issue in the browser, that would be the easiest and reliable solution for us.

Loading

@robyedlin
Copy link

@robyedlin robyedlin commented Nov 27, 2019

@buremba What would an ideal user experience look like then, given the constraints?

Loading

@buremba
Copy link

@buremba buremba commented Nov 27, 2019

@robyedlin Ideally, Nuxt can load all chunks into the browser's cache so that the user doesn't need to reload the page. There might be a service worker in the background that checks the new version and pushes a notification to the user to reload the page in order to update to the latest version. In fact, there are few apps that follow this approach. See https://medium.com/progressive-web-apps/pwa-create-a-new-update-available-notification-using-service-workers-18be9168d717

Loading

@robyedlin
Copy link

@robyedlin robyedlin commented Nov 27, 2019

@buremba This is actually how nuxt spa mode works, so an option to allow this in universal mode might be cool.

@Atinux what do you think about a universal mode config option that allows downloading all js chunks async on first page load, similar to the way it works in spa mode? This would mitigate almost all loading chunk errors.

Loading

@buremba
Copy link

@buremba buremba commented Nov 27, 2019

I did not know about the PWA before, just started experimenting it for this use-case. Couldn't find any relevant information here though. https://pwa.nuxtjs.org/

Loading

@josepjaume
Copy link

@josepjaume josepjaume commented Nov 27, 2019

I kind of fixed this in the past by checking for a version file containing the SHA of the latest commit in the background, and then setting an updated state in the store if changed. Then I hooked into the router to check if updated was set, and instead of changing routes on the client-side, the app resorted to regular navigation, reloading the app "seamlessly".

Ugly hack, but it worked. Sure there's better ways to do this though.

Loading

@garineGiftagram
Copy link

@garineGiftagram garineGiftagram commented Dec 11, 2019

OK so files starting with . will give 404 not found error. This is happening to me with nested routes. Not sure what the solution is for now.

Loading

@AndrewBogdanovTSS
Copy link

@AndrewBogdanovTSS AndrewBogdanovTSS commented Dec 12, 2019

@garineGiftagram why do you need to call your routes starting with . ?

Loading

@garineGiftagram
Copy link

@garineGiftagram garineGiftagram commented Dec 12, 2019

@AndrewBogdanovTSS chunks/code splitting are created by my dynamic routes.

Check my stackoverflow Question
https://stackoverflow.com/questions/59292564/nuxt-js-npm-run-build-results-in-some-js-files-being-not-found

Loading

@AndrewBogdanovTSS
Copy link

@AndrewBogdanovTSS AndrewBogdanovTSS commented Dec 16, 2019

@garineGiftagram from the link I understood that the problem is not in generation but in the filename, there shouldn't be cases when your file don't have a name. You could at least put cache in front of it. Did you find what was causing empty names issue?

Loading

@garineGiftagram
Copy link

@garineGiftagram garineGiftagram commented Dec 17, 2019

@AndrewBogdanovTSS even when I change the filename settings in the config , this one particular file did not get updated. whatever I did, I just got .234dfg.js But I fixed the issue by changing nuxt config as in the stackoverflow answer. thanks for the help though.

Loading

@khangal
Copy link

@khangal khangal commented Jan 23, 2020

For now I use the following workaround by adding this to the error template: it will reload the page. The user will be again on the page where she/he started the navigation. She/he can then retry the interaction.

It adds a hash to the URL to avoid infinite reloads. The hash will be automatically removed on the next successful navigation.

This will might work for you as well until #3940 is released. Tested with Nuxt 2.2, but should work with earlier versions as well.

    mounted: function () {
      if (this.error.statusCode === 500
        && /^Loading chunk [0-9]+ failed/.test(this.error.message)
        && window.location.hash !== '#retry') {
        // the chunk might no longer be available due to a recent redeployment of the page
        // mark the page to don't trigger reload infinitely
        window.location.hash = '#retry'
        window.location.reload(true)
      } 

Comments to improve the workaround are welcome!

This workaround is not working because layouts/error.vue is not rendered.
nuxt version: 2.11.0
build command: yarn generate

Loading

@cain
Copy link
Contributor

@cain cain commented Feb 18, 2020

@pi0 is it possible to get this issue reopened?

Loading

@cain
Copy link
Contributor

@cain cain commented Feb 18, 2020

@khangal Please let me know if you find a workaround :)

Loading

@gabrielsze
Copy link

@gabrielsze gabrielsze commented Aug 19, 2020

I received this same error on production build as well. Wanting to know if there's a good fix for this.

Loading

@pi0
Copy link
Member

@pi0 pi0 commented Aug 19, 2020

Hi. It is expected that #3940 to be working and trigger a hard reload if a chunk is missing. Do you mind opening a new issue (with proper steps to reproduce) describing in what situation error can't be handled?

Loading

@yuchiko
Copy link

@yuchiko yuchiko commented Oct 22, 2020

Hi. It is expected that #3940 to be working and trigger a hard reload if a chunk is missing. Do you mind opening a new issue (with proper steps to reproduce) describing in what situation error can't be handled?

@pi0 As I understood you fixed chunk errors only for css files. Did you have a reason for this ? Cause right now I have an error with js files with "@nuxt/core@2.12.2":

I thought to add a reload for js chunks files or try to keep all chunks from the previous 1-2 releases.

Loading

@guska8
Copy link

@guska8 guska8 commented Oct 29, 2020

still happening on nuxt 2.14.7

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Bugs 🐞
  
Fixed