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

[aldarund]

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

[lucasmpaim]

Any update on this?

[aldarund]

@lucasmpaim you can use workaround like this for now -> https://github.com/nuxt/nuxt.js/issues/742#issuecomment-393776050

[Atinux]

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 :)

[qm3ster]

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

[amorino]

Any update on this?

[ahus1]

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!

[stale[bot]]

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

[sumeshkmp]

Have seen this issue on V2.2.0

[magisters-org]

Up, one more.

[josepjaume]

This is definitely an issue.

[purpleow1]

Is this issue fixed in version 2.4.0?

[ahus1]

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)

[ameistad]

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

[unr]

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?

[wushan]

please reopen this issue, this is a serious problem on production apps.

[sskyu]

A CSS chunk error occurs in the production environment.
It seems that it can be fixed by changing the following line as a temporary countermeasure.
https://github.com/nuxt/nuxt.js/blob/2015140d1287bcf3701b170cd7d4000b01270c82/packages/vue-app/template/client.js#L160

- if (/^Loading chunk (\d)+ failed\./.test(message)) {
+ if (/^Loading( CSS)? chunk (\d)+ failed\./.test(message)) {

However, I am looking for a better solution than this patch.

[ahus1]

@ssku, maybe adding a snippet to your error page like in my comment https://github.com/nuxt/nuxt.js/issues/3389#issuecomment-431609130 can serve as a workaround until this is fixed in a Nuxt release. Of course the match condition needs to be changed to include CSS chunks like you described.

Are you willing to submit a pull request to change the line you mentioned in your comment?

[sskyu]

@ahus1 Yeah, thanks your work ;)

[zajca]

I'm having similar issue with 2.6.3 (also before this version) after deploy

Unhandled promise rejection Error: "Loading chunk 23 failed.
(missing: https://<www>/_nuxt/pages/<page>.js)"

[francoislevesque]

The best solution is to use a zero dowtime deployment flow.

More details here: “Nuxt & PM2: Zero Downtime Deployment” by Xander Luciano https://link.medium.com/yyfdzAE0aW

Basically, you want to build each release on a separate folder. You then create a symlink folder (eg: ./current) pointing to the latest release once the build process is completed.

This is called Capistrano Deployment, you can look this up here:

http://pm2.keymetrics.io/docs/tutorials/capistrano-like-deployments

This issue might also help:

https://github.com/nuxt/nuxt.js/issues/3078#issuecomment-405464005

[unr]

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.

[zajca]

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

[AndrewBogdanovTSS]

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

[AndrewBogdanovTSS]

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

[buremba]

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

[robyedlin]

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

[buremba]

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

[robyedlin]

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

[buremba]

@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

[robyedlin]

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

[buremba]

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/

[josepjaume]

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.

[garineGiftagram]

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.

[AndrewBogdanovTSS]

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

[garineGiftagram]

@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

[AndrewBogdanovTSS]

@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?

[garineGiftagram]

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

[khangal]

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

[cain]

@pi0 is it possible to get this issue reopened?

[cain]

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

[gabrielsze]

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

[pi0]

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?

[yuchiko]

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/[email protected]":

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

[guska8]

still happening on nuxt 2.14.7