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

[hjpotter1]

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:

• onUpdated: https://github.com/cloudinary/frontend-frameworks/blob/master/packages/vue/src/components/AdvancedImage.vue#L153-L156
• onUnmounted: https://github.com/cloudinary/frontend-frameworks/blob/master/packages/vue/src/components/AdvancedImage.vue#L161-L164

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.

[dejihastrup-cl]

Hi @hjpotter1

Thanks for raising this. I will send this over to our SDK team to verify and keep you posted.

Thanks,
Deji