CODEWITHSUNDEEP
vue.jswebpacksingle-page-application
Senate No. 7
Senate No. 7

Reputation: 395

ChunkLoadError: Loading chunk failed (VueJS + Webpack)

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

Upvotes: 7

Views: 8916

Answers (1)

Amr Omar
Amr Omar

Reputation: 557

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

Upvotes: 3

Related Questions