Open pklaschka opened 2 years ago
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>
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.
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">Tobias@email.com</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">Tobias@email.com</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.
Cf. https://forums.creativeclouddeveloper.com/t/bug-rendering-img-causes-error/4564
Reported by: "Tobjoern"
Error message:
Reproduction is available at: https://github.com/Tobjoern/ui-vue-3-starter-bug