如何修复Vue.js项目Pug模板unexpected token indent缩进错误

我们拥有由15个以上项目组成的项目集群，所有项目均已稳定运行三年以上。重新安装node_modules后，所有项目突然大面积出现如下语法错误：

Syntax Error: Error: C:\Users\veneg\Desktop\***\assets2\src\views\template\Socials.vue:2:1
    1|
  > 2|   .social
-------^
    3|     a.social__link.rtl(v-for="(soc, index) in socials" :key="index" :href="soc.link" target="blank")
    4|       icon(:name="soc.name" nofill)
    5|

unexpected token "indent"

当前项目内共有超过3000个文件触发该错误，已尝试调整pug相关loader版本，未产生任何效果。

相关依赖版本 #

"vue-loader": "~15.6",
"vue-style-loader": "~4.1",
"vue-template-compiler": "~2.6",
"webpack": "~4.29",
"webpack-bundle-analyzer": "~3.0",
"webpack-cli": "~3.2",
"webpack-dev-server": "~3.1",
"webpack-hot-middleware": "~2.24",
"webpack-merge": "~4.2",
"@vue/cli-plugin-babel": "4.2.0",
"@vue/cli-plugin-eslint": "4.2.0",
"@vue/cli-service": "4.4.1",
"@vue/eslint-config-airbnb": "5.0.2",
"pug": "2.0.4",
"pug-plain-loader": "1.0.0",

该报错是pug的间接依赖pug-lexer 5.0.1版本引入的缩进解析bug导致。虽然package.json中锁定了pug主包版本为2.0.4，但没有锁定子依赖版本，重新安装依赖时pug-lexer被自动升级到存在问题的5.0.1版本，该版本会错误将文件开头空行后的合法缩进判定为非法indent token，和业务代码写法、pug loader版本无关。

• 推荐方案（零代码改动，一次性修复所有报错）：
  1. 根据使用的包管理器，在项目根目录的package.json中新增对应配置，强制全项目锁定pug-lexer版本为无问题的5.0.0版本：
     • npm 8.3及以上版本新增overrides字段：

       "overrides": {
         "pug-lexer": "5.0.0"
       }
       

     • yarn 包管理器新增resolutions字段：

       "resolutions": {
         "pug-lexer": "5.0.0"
       }
       

  2. 删除现有node_modules目录、对应锁文件（npm为package-lock.json，yarn为yarn.lock）
  3. 重新执行依赖安装命令，重启构建服务即可，所有3000+文件的报错会全部消失，不需要修改任何业务代码。
• 备选方案（无需调整依赖配置，改造成本极高）：
  逐个修改触发报错的.vue文件，删除<template lang="pug">标签后的第一行空行，让pug模板内容直接从template标签下第一行开始编写，即可绕过该解析bug，但3000+文件修改成本过高，不推荐使用。

注意：不要尝试升级pug主包到3.x版本，3.x版本存在大量不兼容变更，会导致现有稳定运行的老项目触发更多兼容性问题。

内容的提问来源于stack exchange，提问作者user16751547