cloudinary / cloudinary/frontend-frameworks

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

Open
#265 1 comment 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.