title: External Pug Templates - Template syntax error Component template requires a root element, rather than just text
body: <p>I've been battling trying to get Pug templates working with Vue class based components with the pug template as a separate file. According to the docs adding this should just work:</p>
  
  <pre><code>// webpack.config.js -&gt; module.rules
  {
    test: /\.pug$/,
    oneOf: [
      // this applies to `&lt;template lang="pug"&gt;` in Vue components
      {
        resourceQuery: /^\?vue/,
        use: ['pug-plain-loader']
      },
      // this applies to pug imports inside JavaScript
      {
        use: ['raw-loader', 'pug-plain-loader']
      }
    ]
  }
  </code></pre>
  
  <p>but it doesn't. I get the error</p>
  
  <pre><code>(Emitted value instead of an instance of Error) template syntax error Component template requires a root element, rather than just text.
  </code></pre>
  
  <p>Here's my component 'HelloWorld.ts':</p>
  
  <pre><code>import { Component, Prop, Vue } from 'vue-property-decorator'
  //import WithRender from '!vue-template-loader!pug-plain-loader!./hello-world.pug' &lt;-- This works fine
  import WithRender from './hello-world.pug'
  
  @WithRender
  @Component
  export default class HelloWorld extends Vue {
    @Prop() private msg!: string
  }
  </code></pre>
  
  <p>Can't get it to work no matter what combination I try with the loaders config. I've also tried moving the loaders into the chainWebpack section of the vue.config.js but just give the same errors.</p>
  
  <p>The strange thing is though it works perfectly fine if I import using the following loader short form:</p>
  
  <pre><code>import WithRender from '!vue-template-loader!pug-plain-loader!./hello-world.pug'
  </code></pre>
  
  <p>Can anyone tell me where I might be going wrong? It's driving me nuts.</p>