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

未关闭 适合新手
  • 哪里不对？
#265 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

@strausr 已经在做这个了。

开始于 2026年6月29日。

  • #266 来自 @strausr —— 未关闭

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
68/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
冷清
技术栈
typescript
领域
frontend

调研方向

从链接行中的 packages/vue/src/components/AdvancedImage.vue 的 onUpdated 和 onUnmounted hook 开始，然后检查 AdvancedVideo 中对应的 hook。复现 issue 中描述的快速 mount-to-unmount 情况，并验证当 htmlLayerInstance 不可用时，两个组件都不再抛出异常。

由索引模型根据 Issue 内容生成。

描述

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.

主要语言
TypeScript
星标
49
派生
17
30 天内没有已合并 PR

环境准备

这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

cloudinary/frontend-frameworks 的其他 Issue

查看 cloudinary/frontend-frameworks 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。