VueJS 3.0.0 Pug Rendering Failure After Upgrade

Viewed 868

I've been banging my head against the wall all day on this.

Basically, I inherited a pretty large Vue 2 project with webpack-only implementation (no CLI) and with hundreds of SFC components. Almost every SFC component uses a template with the first element indented -- like this:

<template lang="pug">
     span
         b Some Stuff
</template>

This has been compiling just fine for months. It seems like Vue 3 and its associated versions of the vue-loader and compiler don't like this... it must be like this:

<template lang="pug">
span
    b Some Stuff
</template>

As you can imagine, I am getting hundreds of "unexpected character 'indent'" errors during the build. I run into this whether I use the CLI or whether I use the webpack implementation with all associated upgrades having been done manually...

As much as I love the idea of manually paging through each of the hundreds of .vue files and tabbing back the content, there has got to be a better way around this... right? There appears to be an npm package called vue-indent-pug-loader but after replacing the pug-plain-loader in the webpack file, this doesn't seem to have any effect on the problem.

Is there some utility you know of that can roll through and "fix" my template blocks, or something I can place in front of the compiler to let it process the templates as-is, or am I stuck either manually fixing these or staying on Vue 2?

Thanks!

0 Answers
Related