AdvancedImage/AdvancedVideo crash: "Cannot read properties of undefined (reading 'htmlPluginState')" when unmounted before onMounted

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#265 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

@strausr đang làm issue này rồi.

Từ ngày 29/6/2026.

  • #266 của @strausr — đang mở

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
68/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu với các hook onUpdated và onUnmounted trong packages/vue/src/components/AdvancedImage.vue tại các dòng được liên kết, sau đó kiểm tra các hook tương ứng trong AdvancedVideo. Tái hiện trường hợp mount-to-unmount nhanh được mô tả trong issue và xác minh rằng cả hai component không còn ném exception khi htmlLayerInstance không khả dụng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

New issue for cloudinary/frontend-frameworks
For which package is this issue?

@cloudinary/vue — AdvancedImage / AdvancedVideo.

Describe the issue in a sentence or two.

AdvancedImage and AdvancedVideo read htmlLayerInstance.htmlPluginState in their onUpdated/onUnmounted hooks without a null check. htmlLayerInstance is only assigned in onMounted, so if the component is unmounted before onMounted runs (e.g. a fast route transition / rapid mount→unmount), the onUnmounted hook throws TypeError: Cannot read properties of undefined (reading 'htmlPluginState'). Confirmed still present on master (1.13.4).

Source:

Suggested fix — guard the instance in both hooks (and in AdvancedVideo):

onUpdated(() => {
  if (!htmlLayerInstance) return;
  cancelCurrentlyRunningPlugins(htmlLayerInstance.htmlPluginState);
  htmlLayerInstance.update(props.cldImg, props.plugins, SDKAnalyticsConstants);
});
onUnmounted(() => {
  htmlLayerInstance?.htmlPluginState &&
    cancelCurrentlyRunningPlugins(htmlLayerInstance.htmlPluginState);
});

Same class of "missing undefined guard" as #181 (analyticsOptions in HtmlImageLayer).

Issue Type (Can be multiple)

[ ] Build - Can't install or import the SDK
[ ] Performance - Performance issues
[x] Behaviour - Functions aren't working as expected
[ ] Documentation - Inconsistency between the docs and behaviour
[ ] Incorrect Types
[ ] Other (Specify)

Steps to reproduce
  1. Render <AdvancedImage :cldImg="..." /> (no plugins needed).
  2. Unmount it before mount completes — e.g. toggle it off via v-if in the same tick it is created, or navigate away immediately after the route that mounts it.
  3. The onUnmounted hook throws the TypeError above.
Error screenshots

No screenshot; relevant stack frames:

TypeError: Cannot read properties of undefined (reading 'htmlPluginState')
  at hook                       (@cloudinary/vue/index.js)   // onUnmounted
  at callWithErrorHandling      (@vue/runtime-core)
  at callWithAsyncErrorHandling (@vue/runtime-core)
  at flushPostFlushCbs          (@vue/runtime-core)
  at flushJobs                  (@vue/runtime-core)
Browsers (if issue relates to UI, else ignore)

[ ] Chrome
[ ] Firefox
[ ] Safari
[ ] Other (Specify)
[x] All

Versions and Libraries (fill in the version numbers)

@cloudinary/vue - 1.13.0 (also reproduces on master / 1.13.4)
Node - 22.22.2
NPM - 10.9.7

Config Files (Please paste the following files if possible)

N/A — bug is in the library's lifecycle hooks (source links above).

Repository

No standalone repro repo; the issue is in the component lifecycle hooks linked above.

Ngôn ngữ chính
TypeScript
Star
49
Fork
17
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của cloudinary/frontend-frameworks

Tất cả issue của cloudinary/frontend-frameworks

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.