AdvancedImage/AdvancedVideo crash: "Cannot read properties of undefined (reading 'htmlPluginState')" when unmounted before onMounted
Bewertung
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Anfängerfreundlichkeit
- 68/100
- Issue-Typ
- Bug
- Klarheit
- Klar beschrieben
- Aktivitätsstatus
- Ruhig
- Tech-Stack
- typescript
- Bereich
- frontend
Rechercherichtung
Beginne mit den Hooks onUpdated und onUnmounted in packages/vue/src/components/AdvancedImage.vue an den verlinkten Zeilen und untersuche anschließend die entsprechenden Hooks in AdvancedVideo. Reproduziere den im Issue beschriebenen Fall eines schnellen Mountens und Unmountens und überprüfe, dass beide Komponenten keine Exception mehr auslösen, wenn htmlLayerInstance nicht verfügbar ist.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
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.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 49
- Forks
- 17
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Entwicklungsumgebung
Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus cloudinary/frontend-frameworks
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 42/100
cloudinary/frontend-frameworks#253 · 5 Kommentare ·
-
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 30/100
cloudinary/frontend-frameworks#240 · 1 Kommentar · 1 Reaktion ·
-
Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 38/100
cloudinary/frontend-frameworks#234 · 20 Kommentare · 1 Reaktion ·
Alle Issues in cloudinary/frontend-frameworks
Ähnliche Issues
-
bug
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 66/100
devswha/herdr-web-ui#3875 ·
-
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 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
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 78/100
Maintainer antworten meist innerhalb von 1 Tag
-
discovery:other factory-active task-identify-harness-labels-done task-identify-issue-type-done
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 62/100
vercel/ai#25068 · 4 Kommentare ·
Maintainer antworten meist innerhalb von 1 Tag
-
create-strapi-app doesn't await writing license.txt, so a failed write skips its error handlingOffenflag: invalid template issue: bug severity: low source: cli status: pending reproduction version: 5
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100
strapi/strapi#28637 · 1 Kommentar ·
Maintainer antworten meist innerhalb von 2 Tagen