template lang="pug" does not compile after update 0.15.1 -> 0.16.4

[dan-leech]

I use <template lang="pug"> in all vue components.
But in 0.16.4 it is seem that pug is ignored while compiling template.

I get error: Component template requires a root element, rather than just text in each file with pug. All pug lang is interpreted as text.

Does anybody know how to fix it?
If it involves webpack please provide config I’m not good at it.

[nothingismagick]

@dan-leech - please see this link: (there is a webpack modification you need to make)

• https://quasar-framework.org/guide/app-pre-processors-and-webpack.html#Pug

[dan-leech]

@nothingismagick I think this method supposes using template in a separate file with *.pug extension. ( I tried this and have all the errors)
But what do I do when all files are *.vue?

[nothingismagick]

I assume you have pug-loader installed as a dev-dependency, right? I don’t know why this shouldn’t be working. You said you upgraded, perhaps it is a good idea to remove your yarn.lock (or package-lock.json), delete the node_modules folder and reinstall the dependencies. See this page for more information about upgrading:

https://quasar-framework.org/guide/quasar-upgrade-guide.html#Upgrading-v0-15-to-v0-16

[dan-leech]

@nothingismagick yes I have pug-loader, I removed yarn.lock and node_modules when did update
All worked with 0.15 and don’t with 0.16

[nothingismagick]

@dan-leech - Just out of curiosity, what version of vue-cli do you have installed globally? It should be 2.9.6…

[rstoenescu]

https://quasar-framework.org/guide/app-pre-processors-and-webpack.html#Pug

[dan-leech]

@nothingismagick I have update it old one was 2.9.3 but nothing happend.
My error text(one of them) maybe it can help:

ERROR in ./src/pages/screen-user-page.vue?vue&type=template&id=09486898&lang=pug (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/screen-user-page.vue?vue&type=template&id=09486898&lang=pug)
(Emitted value instead of an instance of Error) 
  Error compiling template:
  
  q-page( padding ).flex.screen-user-page
    .container.row.col
      .column.full-width Other pug template rows
  
  - Component template requires a root element, rather than just text.

@ ./src/pages/screen-user-page.vue?vue&type=template&id=09486898&lang=pug 1:0-222 1:0-222
 @ ./src/pages/screen-user-page.vue
 @ ./src/router/routes.js
 @ ./src/router/index.js
 @ ./.quasar/entry.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8085 webpack/hot/dev-server ./.quasar/entry.js```

[rstoenescu]

So first take a look here: https://quasar-framework.org/guide/app-pre-processors-and-webpack.html#Pug
then here: https://vue-loader.vuejs.org/guide/pre-processors.html#pug

We’ve switched to vue-loade v15 which changed some things. If pug is not working for you, then it’s a bug in vue-loader and should be reported there. Thanks.

[dan-leech]

@nothingismagick thank you very much.
I don’t know what exactly helped but after following all steps carefully all work now.
https://quasar-framework.org/guide/app-pre-processors-and-webpack.html#Pug