ChunkLoadError: Loading chunk failed (VueJS + Webpack)

user_11057059 0
Viewed 1909

I currently have a Wordpress + VueJS 3 project with a Webpack 5.43 build. On production environment when a new version is deployed and a website visitor already has a tab open, when navigation is triggered within my Vue SPA, the below error (or similar) always appears:

ChunkLoadError: Loading chunk 7567 failed.
(error: http://loc.site.com/wp-content/themes/my-theme/dist/main/2b26538361c74a8bb15f.js)
    at Object.o.f.j (main.fb8c71b3372ca9169338.js:2)
    at main.fb8c71b3372ca9169338.js:2
    at Array.reduce (<anonymous>)
    at Function.o.e (main.fb8c71b3372ca9169338.js:2)
    at component (main.fb8c71b3372ca9169338.js:2)
    at be (main.fb8c71b3372ca9169338.js:2)
    at main.fb8c71b3372ca9169338.js:2

This is happening because the session currently already open is requesting an older version of my production code which is not present any further. After the error appears, navigation in my SPA gets a bit weird with some router links not working.

My current webpack output build is the below:

...,
output: {
    filename: (chunkData) => {
        return chunkData.chunk.name === 'main' ? '[name]/[name].[hash].js': '[name]/[name].js';
    },
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/wp-content/themes/my-theme/dist/',
    chunkFilename: 'main/[chunkhash].js',
},
...,

I have tried to change chunk file names to try to fix this error however I was not able to just as yet. Will continue to investigate and provide any updates (if any). The biggest question apart from a potential fix for this error is why is it happening on production environment when the chunk files are cached through Cloudflare.

Anyone encountering this same error and can provide a solution please?

Thanks in advance :)

single-page-application vue.js webpack
1 Answers

You need to have your index.html and entrypoint files never cached, which can be done using the cache-control header (Cache-Control - HTTP) To solve this, I changed the Nginx config like below

location ~* \.html?$ {
    expires -1;
    add_header Pragma "no-cache";
    add_header Cache-Control "no-store, must-revalidate";
  }

For more details, this article explains why that happens https://blog.francium.tech/vue-lazy-routes-loading-chunk-failed-9ee407bbd58

user_116142420
Related