javascript - Yet another "Failed to mount component: template or render function not defined" from Vue

Question

Despite a lot of similar questions on SO, could not find an answer that would work for me. In essence, here is my very simplified Vue single-file component:

Listing.vue:

<template>
  <section class="main">
    Component
  </section>
</template>

<script>
  export default {
    name: 'todoapp-listing',
    …
  }
</script>

Now I need to render it in a Web Component:

wrapper.js:

import Vue from 'vue';
import Listing from './src/Listing.vue';

class Wrapper extends HTMLElement {
  connectedCallback() {
    const appWrapper = document.createElement("div");
    appWrapper.classList.add('todoapp');

    this.attachShadow({ mode: "open" }).appendChild(appWrapper);

    new Vue({
      render: h => h(Listing),
    }).$mount(appWrapper);
  }
}

customElements.define("custom-wrapper", Wrapper);

When this Web Component is being added to a page, I get the following in the console:

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Listing> at src/Listing.vue
       <Root>

Have tried adding vue$ alias to webpack config. Didn't help. Babels is running with @babel/preset-env.

What am I missing here?

标签： javascriptvue.jswebpackbabeljsweb-component