cloudinary / cloudinary/frontend-frameworks
AdvancedImage/AdvancedVideo crash: "Cannot read properties of undefined (reading 'htmlPluginState')" when unmounted before onMounted
- Dominant language
- TypeScript
- Stars
- 50
- Forks
- 17
- PR merge metrics
- No merged PRs in 30d
Description
### 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):
```ts
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 `` (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.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.