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

Aberta Para iniciantes
  • Algo errado?
#265 1 comentário 0 reações 0 responsáveis Ver no GitHub

@strausr já está trabalhando nisso.

Desde 29/6/2026.

  • #266 de @strausr — aberto

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
68/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Pouca atividade
Stack de tecnologia
typescript
Domínio
frontend

Direção de pesquisa

Comece pelos hooks onUpdated e onUnmounted em packages/vue/src/components/AdvancedImage.vue nas linhas vinculadas e, em seguida, inspecione os hooks correspondentes em AdvancedVideo. Reproduza o caso de mount-to-unmount rápido descrito na issue e verifique se ambos os componentes não lançam mais exceções quando htmlLayerInstance não estiver disponível.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.

Linguagem predominante
TypeScript
Estrelas
49
Forks
17
Nenhum PR com merge em 30d

Preparar o ambiente

Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de cloudinary/frontend-frameworks

Todas as issues de cloudinary/frontend-frameworks

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.