[Bug] Rendering <img> causes error

Photoshop
1

I used the vue-3-starter from here, to create a photoshop plugin.
Unfortunately, when trying to render an tag, I often get the error:

Exception while invoking panel method on Plugin Id: com.adobe.uxp.starter.vue3, Panel Id: helloworld, Entrypoint: create, TypeError: Cannot read property 'firstChild' of undefined
    at insertStaticContent (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:231)
    at mountStaticNode (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4679)
    at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4627)
    at mountChildren (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4828)
    at processFragment (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4999)
    at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4634)
    at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5180)
    at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:223)
    at setupRenderEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5299)
    at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5082)

Through my investigation I figured out, it has something to do with the html markup, as the error sometimes disappears when different elements are uncommented or removed, though there are no clear patterns.
I also created a reproduction of this error here: GitHub - Tobjoern/ui-vue-3-starter-bug

Simply:

  • npm i
  • npm run watch
  • Load dist/manifest via Developer Tool

Expected Result:

  • The App loads

Actual Result:

  • Blank Panel, nothing loads, aforementioned error in console

Help would be appreciated!

2

Thanks for reporting this!

I’ll try my best to look into it and figure this out. Unfortunately, I’m not a Vue expert by any stretch of the imagination, so if anyone from the community knows anything about this / has seen this in combination with Vue before, any insights are appreciated!

Thanks,
Pablo

3

Tracked in Vue Starter Error · Issue #72 · AdobeDocs/uxp-photoshop-plugin-samples · GitHub

4

I think it’s caused by elements that are commented out, especially the first form element. If I remove that the error goes away too. Could be caused by vetur/volar, no idea.