Nuxt.js: Error when failed to load chunk on new deployment build (404 network issue)

[cain]

Version

v2.11.0

Reproduction link

https://localhost:3000

Steps to reproduce

1. Be active on NuxtJS site
2. The new deployment is deployed, removing all previous build files from the server.
3. User clicks nuxt-link on site, resulting in ChunkLoadError.

What is expected ?

User to be reloaded: https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/client.js#L184

See: #3389

What is actually happening?

Throwing error, but not being redirected to an error page.

Additional comments?

Sorry for not having a Reproduction link, if anyone else is having this issue or has a workaround please let us know :)

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[cain]

bump stale bot

[lxc455735702]

Do you have a solution? I also encountered the same problem @cain

[cain]

@lxc455735702 We enabled prefetching for the meanwhile

[jsbroks]

Same issue here!

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[shrpne]

not stale

[Atinux]

We will look at it sorry about this

[Atinux]

I just tested locally and I do have the page reload happening when I have a failed chunk:

I disabled router.prefetchLinks as well.

[Atinux]

Could you please share the error that is displayed on the console? Maybe it does not goes inside this condition:

if (/^Loading( CSS)? chunk (\d)+ failed\./.test(message)) {
    window.location.reload(true /* skip cache */)
    return // prevent error page blinking for user
}

[nicolashmln]

That's was that error on nuxt 2.11

But it seems to be fixed on nuxt 2.12.2, the page reloads indeed

[cain]

fixed on 2.12.2, thanks @Atinux

[manniL]

Closing here then

[Abdulla1995]

fixed on 2.12.2, thanks @Atinux

I guess this only fixes CSS loading errors. But js loading error still existing on my production deployment. When I deploy new build with minor changes while site opening in browser, when I change route, I get Loading chunk failed error ( cuz chunk hash already changed and old one deleted). I have upgraded 2.12.2 but there is no fix for this situation. Both SPA and Universal versions failed for me.

@Atinux in your comment I see you added CSS error reloader to prevent such problems. But no js error loader fix existing. And still I cant found any solution how to show user that there is new deployment and need to reload page (the worst case - reload app without showing anything, but I can be sure that it will work after reload). Please answer this immediately, because all NUXT applications will fail in such situation and this makes me feel I do code for nothing:/ .

[jsbroks]

I am also getting chunk loading errors in development. Once I get one I have to clear my cache and then it works. Very irritating

[janswist]

I have 2.13.2 and have the very same issue + related to https://github.com/nuxt/nuxt.js/issues/6338

Initial load is ok, then I click refresh and it loads indefinitely. I click refresh again and it loads, again refresh, again it goes on on and on. To get error message I had to interrupt refresh:

On incognito works flawlessly. Seems like @jsbroks is right - it has something to do with cache. Not sure though why it's not working when I click 'Disable cache' in Developer Tools.

edit: Found the possible reason. I had opened localhost:3000 in two other Chrome windows (not tabs). I could reproduce the problem. When I had opened it in two Chrome incognito windows then it was still working good.

Hope it will help.

[bart]

Had same issue and looks like I found a solution: You can set build.filenames in you nuxt.config.js to generate an ID instead of names which solves the issue:

filenames: {
  chunk: ({ isDev }) => (isDev ? '[id].[contenthash].js' : '[name].js'),
},

See https://nuxtjs.org/api/configuration-build/#filenames for further information

[cain]

@bart Interesting, do you know why this fixes the issue?

[bart]

I think it has something to do with paths browsers try to cache when SSR loading a page in advance. Also found this: https://blog.francium.tech/vue-lazy-routes-loading-chunk-failed-9ee407bbd58

[chuoke]

the same issue, after upgrading. According to your comments, my site works again, by configuring filenames.
And I found the doc is wrong:
in the doc, say filenames default is like this:

{
  app: ({ isDev }) => isDev ? '[name].js' : '[contenthash].js',
  chunk: ({ isDev }) => isDev ? '[name].js' : '[contenthash].js',
  css: ({ isDev }) => isDev ? '[name].css' : '[contenthash].css',
  img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[contenthash:7].[ext]',
  font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[contenthash:7].[ext]',
  video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[contenthash:7].[ext]'
}

but in the source code is like this

{
    // { isDev, isClient, isServer }
    app: ({ isDev, isModern }) => isDev ? `[name]${isModern ? '.modern' : ''}.js` : `[name].[contenthash:7]${isModern ? '.modern' : ''}.js`,
    chunk: ({ isDev, isModern }) => isDev ? `[name]${isModern ? '.modern' : ''}.js` : `[name].[contenthash:7]${isModern ? '.modern' : ''}.js`,
    css: ({ isDev }) => isDev ? '[name].css' : '[name].[contenthash:7].css',
    img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[name].[contenthash:7].[ext]',
    font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[name].[contenthash:7].[ext]',
    video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[name].[contenthash:7].[ext]'
  }

[manniL]

the same issue, after upgrading. According to your comments, my site works again, by configuring filenames.
And I found the doc is wrong:
in the doc, say filenames default is like this:

{
  app: ({ isDev }) => isDev ? '[name].js' : '[contenthash].js',
  chunk: ({ isDev }) => isDev ? '[name].js' : '[contenthash].js',
  css: ({ isDev }) => isDev ? '[name].css' : '[contenthash].css',
  img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[contenthash:7].[ext]',
  font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[contenthash:7].[ext]',
  video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[contenthash:7].[ext]'
}

but in the source code is like this

{
    // { isDev, isClient, isServer }
    app: ({ isDev, isModern }) => isDev ? `[name]${isModern ? '.modern' : ''}.js` : `[name].[contenthash:7]${isModern ? '.modern' : ''}.js`,
    chunk: ({ isDev, isModern }) => isDev ? `[name]${isModern ? '.modern' : ''}.js` : `[name].[contenthash:7]${isModern ? '.modern' : ''}.js`,
    css: ({ isDev }) => isDev ? '[name].css' : '[name].[contenthash:7].css',
    img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[name].[contenthash:7].[ext]',
    font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[name].[contenthash:7].[ext]',
    video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[name].[contenthash:7].[ext]'
  }

PR welcome!