Nuxt 2项目Azure流水线构建失败：@azure/storage包加载器异常

问题背景 #

维护一个基于Nuxt 2和Vue 2的项目已达2年，此前运行完全正常，但上周起Azure流水线构建突然失败，本地构建则无异常，甚至之前成功的旧构建在流水线中也无法运行。项目通过import { BlobServiceClient, AnonymousCredential } from "@azure/storage-blob";引入@azure/storage包，尝试添加babel加载器但未解决问题。

报错信息 #

Nuxt build error
Error in ./node_modules/@azure/core-util/dist/browser/aborterUtils.js 11.12
Module parse failed: Unexpected token (11:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concept#loaders

aborter.abort();
}
options?.abortSignal?.addEventListener("abort", abortHandler);
try{
return await Promise.race(abortablePromiseBuilders.map((p) => p({ abortSignal: aborter.signa;})));

项目package.json #

{
  "name": "dd",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "node ./node_modules/nuxt/bin/nuxt.js start",
    "generate": "nuxt generate",
    "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup",
    "test": "jest"
  },
  "dependencies": {
    "@azure/storage-blob": "12.6.0",
    "@capacitor-community/http": "1.0.0",
    "@capacitor/android": "2.4.6",
    "@capacitor/core": "2.4.6",
    "@ffmpeg-installer/ffmpeg": "1.1.0",
    "@fortawesome/fontawesome-svg-core": "1.2.28",
    "@fortawesome/free-brands-svg-icons": "5.13.0",
    "@fortawesome/free-solid-svg-icons": "5.13.0",
    "@fortawesome/vue-fontawesome": "0.1.10",
    "@mathieustan/vue-datepicker": "0.2.11",
    "@nuxtjs/axios": "5.13.6",
    "@nuxtjs/dotenv": "1.4.1",
    "@nuxtjs/svg": "0.4.0",
    "@vue-stripe/vue-stripe": "4.1.1",
    "axios": "^0.24.0",
    "azure-storage": "2.10.4",
    "capacitor-resources": "2.0.5",
    "cookie": "^0.5.0",
    "cordova-res": "0.15.3",
    "core-js": "^3.15.1",
    "cors": "2.8.5",
    "cropperjs": "1.5.9",
    "crypto-js": "4.0.0",
    "debounce": "1.2.0",
    "dotenv": "^16.0.0",
    "express": "^4.18.0",
    "fluent-ffmpeg": "2.1.2",
    "jquery": "1.9.1",
    "js-cookie": "^3.0.1",
    "lodash": "4.17.21",
    "lru-cache": "6.0.0",
    "luxon": "1.25.0",
    "masonry-layout": "4.2.2",
    "moment": "2.9.0",
    "moment-timezone": "0.5.33",
    "number-abbreviate": "2.0.0",
    "nuxt": "^2.15.7",
    "nuxt-start": "^2.15.8",
    "photoswipe": "5.2.4",
    "push-dir": "^0.4.1",
    "rxjs": "6.6.3",
    "simple-vue-validator": "0.16.0",
    "underscore": "1.13.1",
    "v-datatable-light": "0.8.2",
    "v-lazy-image": "1.4.0",
    "video-metadata-thumbnails": "1.0.22",
    "vue-cal": "^3.10.4",
    "vue-datatables-net": "1.4.1",
    "vue-datetime": "1.0.0-beta.13",
    "vue-quill-editor": "3.0.6",
    "vue-rx": "6.2.0",
    "vue-scroll": "2.1.13",
    "vue-select": "3.10.3",
    "vue-svg-loader": "0.16.0",
    "vue-tables-2": "2.3.1",
    "vue-the-mask": "0.11.1",
    "vue-tippy": "4.7.2",
    "vue-toast-notification": "0.4.1",
    "vue2-datepicker": "3.8.2",
    "vue2-google-maps": "0.10.7",
    "vue2-timepicker": "1.1.6",
    "vue3-gmap-custom-marker": "^0.0.5",
    "vuejs-clipper": "3.0.3",
    "vuejs-datepicker": "1.6.2",
    "vuetable-2": "2.0.0-beta.4",
    "vuex": "3.4.0",
    "vuex-persistedstate": "3.0.1",
    "weekstart": "1.0.1"
  },
  "devDependencies": {
    "@vue/test-utils": "^1.2.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^27.0.5",
    "jest": "^27.0.5",
    "vue-jest": "^3.0.4",
    "vue-masonry-css": "1.0.3"
  }
}

解决方案 #

1. 转译指定依赖包 #

Nuxt 2默认不会转译node_modules中的代码，报错里的?.是ES6+可选链语法，需要让Nuxt转译@azure相关依赖。在nuxt.config.js中添加配置：

export default {
  // 其他配置项
  build: {
    transpile: [
      '@azure/core-util',
      '@azure/storage-blob'
    ]
  }
}

2. 锁定子依赖版本 #

流水线可能因依赖缓存拉取了更新的@azure/core-util版本，直接在package.json中锁定该包版本：

{
  "dependencies": {
    // 其他依赖
    "@azure/core-util": "1.0.0",
    "@azure/storage-blob": "12.6.0"
  }
}

执行npm install更新依赖后提交代码。

3. 清理流水线缓存 #

Azure流水线可能缓存了旧依赖或构建产物，在流水线任务中添加清理步骤：

• 执行npm cache clean --force（npm环境）或yarn cache clean（yarn环境）
• 删除node_modules和.nuxt目录后重新安装依赖并构建

4. 统一Node.js版本 #

确保本地和流水线使用的Node.js版本一致，在Azure流水线中添加指定Node.js版本的任务，匹配项目运行所需版本。

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