Nuxt 2 azure package starts breaking on build all of a sudden

Question

I have full fledge application that I have been working on for about 2 years now and it work absolutely fine up until last week. The application uses Nuxt2 and some other vue2 packages. The cloud platform I m using is Azure. Hence I m using @azure-storage package.

The project works absolutely fine locally and even the build generates successfully but as soon as I run the build in azure pipeline it starts to break and shows some issues related to @azure/storage package. This worked fine last week and ironically when I tried running my old builds in pipeline which btw ran successfully, they too started to fail. Below is the error message I m getting in azure pipeline:

Error:-

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;})));

This is the code in mixin/azure.js file where I m importing @azure/storage package:

import { BlobServiceClient, AnonymousCredential } from "@azure/storage-blob";

As it appears to be webpack loaders issue, I have tried adding babel loaders in dependencies and even in resolution as mention on some questions facing kind of similar loaders issue but it wasnt related to azure. Either way I tried it. But azure pipeline still fails when running nuxt build.

Package.json file:

{
  "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"
  }
}

I want to be able to generate nuxt build successfully on azure pipeline.

Answer 1

In order to resolve this error:-

Ensure that your dependencies, including @azure/storage and @azure/core-util, are up to date to prevent compatibility issues. Review your Webpack configuration in the Nuxt project to handle JavaScript files from @azure/core-util properly. Check for recent changes in your code, Azure setup, or dependencies that might have caused the issue. Verify that your Webpack loader configuration includes appropriate settings for handling JavaScript files effectively.

Azure Devops yaml pipeline:-

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '14.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm install --save-dev babel-loader @babel/core @babel/preset-env
  displayName: 'Install dependencies'

- script: |
    npm run build
  displayName: 'Build Nuxt application'

Output:-

You can also build your app with Webpack cli:-

Refer this Github issue