AdvancedImage/AdvancedVideo crash: "Cannot read properties of undefined (reading 'htmlPluginState')" when unmounted before onMounted
Evaluación
- Dificultad
- 2/5
- Tiempo estimado
- 1-3 horas
- Aptitud para principiantes
- 68/100
- Tipo de issue
- Error
- Claridad
- Bien especificado
- Estado de actividad
- Tranquilo
- Stack tecnológico
- typescript
- Área
- frontend
Línea de trabajo
Comienza con los hooks onUpdated y onUnmounted en packages/vue/src/components/AdvancedImage.vue, en las líneas enlazadas, y luego inspecciona los hooks correspondientes en AdvancedVideo. Reproduce el caso de montaje y desmontaje rápido descrito en el issue y verifica que ambos componentes ya no lancen excepciones cuando htmlLayerInstance no esté disponible.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
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.
- Lenguaje dominante
- TypeScript
- Estrellas
- 49
- Forks
- 17
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Preparar el entorno
Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de cloudinary/frontend-frameworks
-
HTML Depends on TypeScriptAbierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 42/100
cloudinary/frontend-frameworks#253 · 5 comentarios ·
-
Dificultad 4/5 3-5 días Aptitud para principiantes 30/100
cloudinary/frontend-frameworks#240 · 1 comentario · 1 reacción ·
-
Dificultad 3/5 1-2 días Aptitud para principiantes 38/100
cloudinary/frontend-frameworks#234 · 20 comentarios · 1 reacción ·
Todos los issues de cloudinary/frontend-frameworks
Issues similares
-
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
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
Los mantenedores suelen responder en 1 día
-
bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100
Yeraze/meshmonitor#6407 ·
Los mantenedores suelen responder en 1 día
-
area: install-setup needs-info question
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
Los mantenedores suelen responder en 1 día
-
area:docs documentation good first issue
Dificultad 2/5 1-3 horas Aptitud para principiantes 85/100
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
Los mantenedores suelen responder en 12 días