Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
64
rated 0 times [  69] [ 5]  / answers: 1 / hits: 67857  / 3 Years ago, thu, september 23, 2021, 12:00:00

We have a vanilla Vue/Vite setup and I'm receiving TypeError: Failed to fetch dynamically imported module on sentry logs.


It seems like the errors are correlated in time with new deployment to prod, although I don't have enough data to confirm. It doesn't happen on local and appears only on deployed code.

I've seen some similar questions for react's setups, but none with a satisfactory response.

I've also found a similar question regarding dynamically imported svgs, but our errors happen for full components.


The only place where we use dynamic imported components is on routing:


export const router = createRouter({
history: routerHistory,
strict: true,
routes: [
{
path: '/',
name: routes.homepage.name,
component: () => import('@/views/Home.vue'),
children: [
{
path: '/overview',
name: routes.overview.name,
component: () => import('@/views/Overview.vue'),
},
// other similar routes
],
},
],
});

Our deps versions:


    "vue": "^3.0.9",
"vue-router": "^4.0.5",
"vite": "^2.0.5",

Any additional information on this issue and how to debug it would be much appreciated!


More From » typescript

 Answers
55

When you dynamically import a route/component, during build it creates a separate chunk. By default, chunk filenames are hashed according to their content – Overview.abc123.js. If you don't change the component code, the hash remains the same. If the component code changes, the hash changes too - Overview.32ab1c.js. This is great for caching.


Now this is what happens when you get this error:



  1. You deploy the application

  2. Your Home chunk has a link to /overview route, which would load Overview.abc123.js

  3. Client visits your site

  4. You make changes in your code, not necessarily to the Overview component itself, but maybe to some children components that Overview imports.

  5. You deploy changes, and Overview is built with a different hash now - Overview.32ab1c.js

  6. Client clicks on /overview link - gets the Failed to fetch dynamically imported module error, because Overview.abc123.js no longer exists


That is why the errors correlate with deployments. One way to fix it is to not use lazy loaded routes, but that's not a great solution when you have many heavy routes - it will make your main bundle large


[#50164] Friday, September 3, 2021, 3 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
ellisw

Total Points: 625
Total Questions: 92
Total Answers: 88

Location: Kazakhstan
Member since Mon, Sep 26, 2022
2 Years ago
ellisw questions
Mon, Aug 23, 21, 00:00, 3 Years ago
Fri, Nov 20, 20, 00:00, 4 Years ago
Sat, Jun 20, 20, 00:00, 4 Years ago
Tue, Apr 21, 20, 00:00, 4 Years ago
;