Vue Starter Error

[pklaschka]

Cf. https://forums.creativeclouddeveloper.com/t/bug-rendering-img-causes-error/4564

Reported by: "Tobjoern"

Through my investigation I figured out, that 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.

Error message:

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)

Reproduction is available at: https://github.com/Tobjoern/ui-vue-3-starter-bug

[JeffWinder]

I cannot build the reproduction sample at all for some reason but the cause of the error could be that Vue or a VS Code extension complains about the hello.vue template having multiple children. One could try to puth these in one div like so:

<template>
  <div>
    <loginPage></loginPage>
    <form style="padding: 20px">
      <sp-heading>
        {{ message }}
      </sp-heading>
      <img src="https://via.placeholder.com/150" class="logo" />
      <sp-body> Button has been clicked {{ count }} times. </sp-body>
      <sp-button v-on:click="increment">Click me</sp-button>
    </form>
  </div>
</template>

[JeffWinder]

Ignore my previous comment, multiple elements in a template shouldn't be an issue in Vue 3. Although it could be related to what I see now: 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 extensions like vetur/volar.

[Tobjoern]

Ignore my previous comment, multiple elements in a template shouldn't be an issue in Vue 3. Although it could be related to what I see now: 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 extensions like vetur/volar.

Hey, I tried uninstalling Vetur, but the error still persists. I agree that it has something to do with comment, but there is something else going on:

(This causes an error)

<template>
  <div class="gen-panel">
    <div class="bar bar--header">
       <div class="left">
        <div class="avatar">
          <span class="avatar-text">T</span>
        </div>
        <div class="user-infos">
          <span class="name">Tobias</span>
          <span class="email">[email protected]</span>
        </div>
      </div> 
      <span class="title">Example</span>
      <div class="right">
        <sp-button variant="secondary">Sign out</sp-button>
      </div>
    </div>

(This doesn't)

<template>
  <div class="gen-panel">
    <div class="bar bar--header">
      <div class="left">
        <!-- <div class="avatar">
          <span class="avatar-text">T</span>
        </div>
        <div class="user-infos">
          <span class="name">Tobias</span>
          <span class="email">[email protected]</span>
        </div> -->
      </div>
      <span class="title">Example</span>
      <div class="right">
        <sp-button variant="secondary">Sign out</sp-button>
      </div>
    </div>

It seems like the compiler simply doesn't like some element combinations, I guess? I really struggle to understand this.