执行quasar build构建Quasar项目失败，编译完成后报错

使用quasar build命令构建Quasar项目时，编译进度到100%后出现如下错误：

App · ⚠️  1 error encountered:

./node_modules/htmlparser2/lib/esm/index.js 59:9
Module parse failed: Unexpected token (59:9)
File was processed with these loaders:
 * ./node_modules/@quasar/app/lib/webpack/loader.transform-quasar-imports.js
You may need an additional loader to handle the result of these loaders.
|     return getFeed(parseDOM(feed, options));
| }
> export * as DomUtils from "domutils";
| // Old name for DomHandler
| export { DomHandler as DefaultHandler };
 @ ./node_modules/sanitize-html/index.js 1:19-41
 @ ./node_modules/vue-sanitize/dist/vue-sanitize.js
 @ ./src/boot/sanitize.ts
 @ ./.quasar/client-entry.js
 @ multi ./.quasar/client-entry.js

 App · ⚠️  [FAIL] Build failed with 1 error. Check log above.

项目的package.json内容如下：

{
  "name": "rfasdef",
  "version": "0.0.1",
  "description": "",
  "productName": "",
  "cordovaId": "",
  "capacitorId": "",
  "author": "",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore ./"
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "@types/file-saver": "^2.0.5",
    "@types/jwt-decode": "^3.1.0",
    "axios": "^0.18.1",
    "crypto-js": "^4.0.0",
    "echarts": "^4.6.0",
    "file-saver": "^2.0.5",
    "formik": "^2.2.9",
    "jalaali-js": "^1.2.3",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "moment-duration-format": "^2.3.2",
    "moment-jalaali": "^0.9.6",
    "num2persian": "^3.2.2",
    "persianjs": "^0.4.0",
    "qjdatetime": "^1.1.0",
    "quasar": "^1.9.5",
    "sass": "^1.45.0",
    "vue-echarts": "^5.0.0-beta.0",
    "vue-i18n": "^8.0.0",
    "vue-persian-datetime-picker": "^2.10.1",
    "vue-sanitize": "^0.2.0"
  },
  "devDependencies": {
    "@quasar/app": "^1.6.2",
    "@quasar/quasar-app-extension-dotenv": "^1.0.1",
    "@types/lodash": "^4.14.150",
    "@types/moment-jalaali": "^0.7.5",
    "@types/node": "^10.17.15",
    "@typescript-eslint/eslint-plugin": "^2.17.0",
    "@typescript-eslint/parser": "^2.17.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.8.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.1.2",
    "vue-property-decorator": "^8.3.0",
    "vuex-class": "^0.3.2",
    "vuex-module-decorators": "^0.11.0"
  },
  "engines": {
    "node": ">= 10.18.1",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  },
  "browserslist": [
    "last 1 version, not dead, ie >= 11"
  ],
  "resolutions": {
    "@babel/parser": "7.7.5"
  }
}

项目昨日可正常构建，今日突然失败，已尝试用yarn和npm重新安装依赖，问题未解决。

这个错误的核心原因是htmlparser2新版本使用了Webpack 4不支持的ES语法（export * as），而当前使用的@quasar/app版本（1.6.2）基于Webpack 4，无法处理该语法。以下是三种可行的解决方法：

• 方案一：锁定htmlparser2兼容版本
  在package.json的resolutions字段中添加对htmlparser2的版本锁定，指定一个兼容Webpack 4的版本：

"resolutions": {
  "@babel/parser": "7.7.5",
  "htmlparser2": "^6.1.0"
}

然后重新安装依赖：

# npm用户
npm install
# yarn用户
yarn install

• 方案二：升级Quasar相关依赖
  如果项目允许，升级@quasar/app和quasar到Quasar v1的最新稳定版（或迁移到v2），新版本的Quasar使用Webpack 5，可支持新ES语法。注意升级前备份项目：

npm install @quasar/app@latest quasar@latest

• 方案三：修改Webpack配置转译依赖
  在项目根目录的quasar.conf.js中，扩展Webpack配置，添加对htmlparser2的转译规则：

build: {
  extendWebpack(cfg) {
    cfg.module.rules.push({
      test: /\.js$/,
      include: /node_modules\/htmlparser2/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    })
  }
}

同时安装所需的依赖包：

npm install babel-loader @babel/preset-env --save-dev

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