AdvancedImage/AdvancedVideo crash: "Cannot read properties of undefined (reading 'htmlPluginState')" when unmounted before onMounted
Évaluation
- Difficulté
- 2/5
- Temps estimé
- 1-3 heures
- Accessibilité débutants
- 68/100
- Type d'issue
- Bug
- Clarté
- Clairement spécifiée
- Activité
- Calme
- Stack technique
- typescript
- Domaine
- frontend
Piste de recherche
Commencez par les hooks onUpdated et onUnmounted dans packages/vue/src/components/AdvancedImage.vue aux lignes indiquées, puis examinez les hooks correspondants dans AdvancedVideo. Reproduisez le cas de montage suivi d’un démontage rapide décrit dans l’issue et vérifiez que les deux composants ne lèvent plus d’exception lorsque htmlLayerInstance n’est pas disponible.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
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):
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
- Render
<AdvancedImage :cldImg="..." />(no plugins needed). - Unmount it before mount completes — e.g. toggle it off via
v-ifin the same tick it is created, or navigate away immediately after the route that mounts it. - The
onUnmountedhook 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.
- Langage dominant
- TypeScript
- Étoiles
- 49
- Forks
- 17
- Métriques de merge des PR
- Aucune PR mergée en 30 j
Préparer son environnement
Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Autres issues de cloudinary/frontend-frameworks
-
HTML Depends on TypeScriptOuverte
Difficulté 2/5 1-3 heures Accessibilité débutants 42/100
cloudinary/frontend-frameworks#253 · 5 commentaires ·
-
Difficulté 4/5 3-5 jours Accessibilité débutants 30/100
cloudinary/frontend-frameworks#240 · 1 commentaire · 1 réaction ·
-
Difficulté 3/5 1-2 jours Accessibilité débutants 38/100
cloudinary/frontend-frameworks#234 · 20 commentaires · 1 réaction ·
Toutes les issues de cloudinary/frontend-frameworks
Issues similaires
-
bug
Difficulté 2/5 1-3 heures Accessibilité débutants 66/100
devswha/herdr-web-ui#3875 ·
-
Difficulté 1/5 Moins d'une heure Accessibilité débutants 88/100
-
area: runtime chore cli consistency dependencies developer-experience difficulty: easy discovery documentation enhancement good first issue help wanted hygiene json-output packaging priority: P3 tests version
Difficulté 2/5 1-3 heures Accessibilité débutants 78/100
Les mainteneurs répondent en général sous 1 jour
-
discovery:other factory-active task-identify-harness-labels-done task-identify-issue-type-done
Difficulté 2/5 1-3 heures Accessibilité débutants 62/100
vercel/ai#25068 · 4 commentaires ·
Les mainteneurs répondent en général sous 1 jour
-
create-strapi-app doesn't await writing license.txt, so a failed write skips its error handlingOuverteflag: invalid template issue: bug severity: low source: cli status: pending reproduction version: 5
Difficulté 2/5 1-3 heures Accessibilité débutants 72/100
strapi/strapi#28637 · 1 commentaire ·
Les mainteneurs répondent en général sous 2 jours