Vue doesn't render second component if the previous self-terminates

Question

In my root component, App.vue, I have the following template code:

<template>
<div class="app-wrapper">
    <Header></Header>
    <Panel></Panel>
    <Showcase/>
    <Modal/>
    <Footer/>
</div>
</template>

I was just trying to mock-up an app I'm building, so the parts aren't nested and don't contain anything meaningful.

Each of those Vue Components contains the following in their .vue:

<template>
  <div class="panel-wrapper">Panel</div>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  name: "Panel"
});
</script>


<style lang="scss">
.panel-wrapper {
  background: orange;
  font-size: 1.75rem;
}
</style>

and this is the same for Header, Showcase, Modal and Footer.

For some odd reason, with the above code, only the Header, Panel, and Showcase components render. If I change <Showcase/> to <Showcase></Showcase> then the Modal also renders.

Shouldn't it render regardless of whether or not the component self terminates its JSX?

I'm new to Vue and set up the project myself with TS, and Parcel, but I don't think know if that has anything to do with it.

Answer 1

This is a known issue with Parcel bundler. Parcel's posthtml as an HTML parser which break with custom self-closing HTML tags.

As a temporary solution, you must tell bundler to explicitly recognize self-closing custom elements. Add the following config to your package.json:

"posthtml": {
    "recognizeSelfClosing": true
}

This issue is being tracked here on these threads: issue-1 and issue-2.