Vue: язык мопса не распознается в шаблоне .vue

Question

Из документации :

Обработка шаблонов немного отличается, потому что большинство веб-пакетов загрузчики шаблонов, такие как pug-loader, возвращают функцию шаблона скомпилированной строки HTML. Вместо того, чтобы использовать pug-loader, мы можем просто установите оригинальный мопс.

TestComponent.vue

<template lang="pug">
  div
    h2 {{ message }}
</template>

<script>
  export default {
    data () {
      return {
        message: 'Done!!! Done...'
      }
    }
  }
</script>

main.js

import Vue from 'vue'
import TestComponent from './../components/TestComponent/TestComponent.vue'

new Vue({
  el: '#app',
  render: h => h(TestComponent)
});

Ошибка:

NonErrorEmittedError: (Emitted value instead of an instance of Error) 
  Error compiling template:

  div
    h2 {{ message }}

  - Component template requires a root element, rather than just text.

Используемые версии зависимостей:

• "webpack": "^ 4.7.0"
• "vue": "^ 2.5.16"
• "vue-loader": "^ 15.2.4",
• "vue-template-compiler": "^ 2.5.16",
• "мопс": "^ 2.0.3"

Answer 1

Вам необходимо настроить Webpack для использования загрузчика языка Pug, в противном случае ваш шаблон анализируется как HTML, а ваш шаблон действительно как HTML не имеет корневого тега (один HTML-элемент, который окружает все другие элементы).

Вам нужно настроить это: https://www.npmjs.com/package/pug-loader

Согласно комментарию вам также может понадобиться: https://www.npmjs.com/package/pug-plain-loader