Fix Lỗi "Failed to fetch dynamically imported module" khi rebuild ứng dụng vue và vite

Vấn đề

Khi mình deloy ứng dụng Vue sử dụng Vite để build ra các bundle, mọi thứ diễn ra bình thường, nhưng điều bất thường sẽ xảy ra nếu như mà mình thường xuyên phải fix lỗi hoặc phát triển thêm tính năng và deloy (build) lại, ở phía người dùng sẽ bị lỗi, ví dụ như Failed to fetch dynamically imported module. 

​Giải thích

Khi mình import một route hoặc component một cách động, trong quá trình build, nó tạo ra một chunk/bundl riêng biệt. Mặc định, tên của các chunk được mã hóa dựa trên nội dung của chúng – Ví dụ: Overview.abc123.js. Nếu mình không thay đổi mã của component, mã hash vẫn giữ nguyên. Nhưng nếu mã của component thay đổi, mã hash cũng thay đổi – Ví dụ: Overview.32ab1c.js. Điều này rất tốt cho việc lưu trữ cache.

Dưới đây là vấn đề xảy ra khi gặp lỗi này:

1. Bạn triển khai ứng dụng
2. Chunk của Trang chủ của bạn có một liên kết tới route /overview, mà sẽ tải Overview.abc123.js
3. Người dùng truy cập vào trang web của bạn
4. Bạn thực hiện thay đổi trong mã của bạn, không nhất thiết phải là trong component Overview chính, mà có thể là trong một số component con mà Overview import.
5. Bạn triển khai các thay đổi, và Overview được xây dựng với một mã hash khác - Overview.32ab1c.js
6. Người dùng nhấp vào liên kết /overview - nhận được lỗi Failed to fetch dynamically imported module, vì Overview.abc123.js không còn tồn tại nữa.

Đó là lý do tại sao các lỗi này liên quan đến việc triển khai. Một cách để sửa chữa là không sử dụng các route được tải lười (lazy loaded routes), nhưng đó không phải là một giải pháp tốt khi bạn có nhiều route nặng - điều này sẽ làm cho bundle chính của bạn trở nên lớn.

​Cách khắc phục

router.onError((error, to) => {
  if (error.message.includes('Failed to fetch dynamically imported module') || error.message.includes("Importing a module script failed")) {
    window.location = to.fullPath
  }
})

​Chắc mình không giải thích gì nhiều, vì nhìn code các bạn đã có thể hiểu rồi, ta lắng xử lí sự kiện ở router nếu có lỗi với các text như trên thì chứng tỏ là hệ thống của chúng ta đã được build mới, lúc này ta phải điều hướng bằng cách dùng window.location thôi.

​

​Chúc bạn thành công !

​

​Tài liệu tham khảo

​https://stackoverflow.com/questions/69300341/typeerror-failed-to-fetch-dynamically-imported-module-on-vue-vite-vanilla-set