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

Aperta Adatta ai principianti
  • Qualcosa non va?
#265 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

@strausr ci sta già lavorando.

Dal 29/6/2026.

  • #266 di @strausr — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
68/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Tranquilla
Stack tecnologico
typescript
Ambito
frontend

Direzione di ricerca

Inizia con gli hook onUpdated e onUnmounted in packages/vue/src/components/AdvancedImage.vue alle righe collegate, quindi esamina gli hook corrispondenti in AdvancedVideo. Riproduci il caso di mount-to-unmount rapido descritto nell’issue e verifica che entrambi i componenti non generino più eccezioni quando htmlLayerInstance non è disponibile.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
49
Fork
17
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di cloudinary/frontend-frameworks

Tutte le issue di cloudinary/frontend-frameworks

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.