External Pug Templates - Template syntax error Component template requires a root element, rather than just text

Question

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:

// webpack.config.js -> module.rules
{
  test: /\.pug$/,
  oneOf: [
    // this applies to `<template lang="pug">` in Vue components
    {
      resourceQuery: /^\?vue/,
      use: ['pug-plain-loader']
    },
    // this applies to pug imports inside JavaScript
    {
      use: ['raw-loader', 'pug-plain-loader']
    }
  ]
}

but it doesn't. I get the error

(Emitted value instead of an instance of Error) template syntax error Component template requires a root element, rather than just text.

Here's my component 'HelloWorld.ts':

import { Component, Prop, Vue } from 'vue-property-decorator'
//import WithRender from '!vue-template-loader!pug-plain-loader!./hello-world.pug' <-- This works fine
import WithRender from './hello-world.pug'

@WithRender
@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string
}

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.

The strange thing is though it works perfectly fine if I import using the following loader short form:

import WithRender from '!vue-template-loader!pug-plain-loader!./hello-world.pug'

Can anyone tell me where I might be going wrong? It's driving me nuts.

score 0 · Answer 1 · answered Nov 15 '19 at 14:09

Sorted it with the help of Vue's inspector:

vue inspect module.rules > rules-output.js

I had to add this to the chainWebpack section of my vue.config.js:

chainWebpack: webpackConfig => {
  webpackConfig.module
    .rule('pug')
      .oneOf('pug-template')
        .uses
          .delete('raw')
          .delete('pug-plain-loader')
          .end()
        .use('vue-template-loader')
          .loader('vue-template-loader')
          .end()
        .use('pug-plain-loader')
          .loader('pug-plain-loader')
          .end()
  },

External Pug Templates - Template syntax error Component template requires a root element, rather than just text

1 Answers1