vue.js で 単一コンポーネントで pug を使ったときに pug-plain-loader text "export default "" outside root element will be ignored. と出る

調べても調べても出てこなかったので

同じエラーになった人のために共有

こういうの使いたいとき

template で pug 使いたい

<template lang="pug">
  div
    p counter: {{ counter }}
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

export default class App extends Vue {
  // 略
}
</script>

こういうエラーでる

pug-plain-loader text "export default "" outside root element will be ignored.

結論

バージョン

OK

    "vue-loader": "15.0.0",
    "pug-plain-loader": "^1.0.0",

NG

    "vue-loader": "15.7.0",
    "pug-plain-loader": "^1.0.0",

推測

pug-plain-loader がリリースされてから、なんか1年くらいメンテされてない

ちなみに Webpack の pug の設定

      {
        test: /\.pug$/,
        oneOf: [
          // this applies to pug imports inside JavaScript
          {
            exclude: /\.vue$/,
            use: ['raw-loader', 'pug-plain-loader']
          },
          // this applies to <template lang="pug"> in Vue components
          {
            use: ['pug-plain-loader']
          }
        ],
      }

参考