Еще один «Не удалось смонтировать компонент: шаблон или функция визуализации не определены» из Vue - PullRequest
Новая
       21

Еще один «Не удалось смонтировать компонент: шаблон или функция визуализации не определены» из Vue

1 голос
/ 15 июня 2019

Несмотря на множество похожих вопросов по SO, не смог найти ответ, который бы сработал для меня. По сути, вот мой очень упрощенный однофайловый компонент Vue:

Listing.vue: 

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

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

Теперь мне нужно отобразить его в веб-компоненте:

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);

Когда этот веб-компонент добавляется на страницу, я получаю в консоли следующее: 

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

found in

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

Попытался добавить псевдоним vue$ в конфигурацию веб-пакета. Не помогло Бабелс бежит с @babel/preset-env.

Что мне здесь не хватает?

...