Nativescript 8.6 build error in postcss-loader

Question

When I try to build my NS 8.6 Core app I get the following error:

ERROR in ./app/pages/verify-payment/verify-payment.css
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
/Users/mfgadmin/Documents/AWLMobileAppiOS/node_modules/postcss-loader/node_modules/cosmiconfig/dist/index.js:78
    if (metaConfig.config?.loaders) {
                          ^

SyntaxError: Unexpected token '.'

Here is my package.json

{
  "scripts": {
    "prepare-ios": "ns clean; ns prepare ios --release",
    "postinstall": "cp patches/firebase/firebase-release.aar node_modules/@nativescript/firebase/platforms/android"
  },
  "main": "./app/app.ts",
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "dependencies": {
    "@nativescript/core": "^8.6.2",
    "@nativescript/email": "^2.0.5",
    "@nativescript/fingerprint-auth": "^8.1.0",
    "@nativescript/firebase": "^11.1.3",
    "@nativescript/iqkeyboardmanager": "^2.0.0",
    "@nativescript/local-notifications": "^6.0.0",
    "@nativescript/theme": "^3.0.2",
    "@nstudio/nativescript-loading-indicator": "^4.1.2",
    "@triniwiz/nativescript-image-zoom": "^4.1.3",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.31",
    "nativescript-exit": "^1.0.1",
    "nativescript-numeric-keyboard": "^5.0.2",
    "nativescript-pdf-view": "^3.0.0-1",
    "nativescript-phone": "^3.0.3",
    "nativescript-ui-calendar": "^14.2.1",
    "nativescript-webview-utils": "^4.0.0"
  },
  "devDependencies": {
    "@nativescript/android": "8.6.2",
    "@nativescript/ios": "^8.6.3",
    "@nativescript/types": "~8.6.1",
    "@nativescript/webpack": "~5.0.18",
    "@types/node": "^18.15.3",
    "typescript": "~4.5.5"
  },
  "gitHead": "",
  "readme": "NativeScript Application"
}

Here is the "offending" css file:

.icon {
    font-size: 20;
}

.title {
    font-size: 20;
    font-family: Raleway, Raleway-Light;
}

Label {
    font-family: 'Roboto-Regular', Roboto-Regular;
    font-size: 14;
}

.msg {
    padding: 0 40;
    text-align: center;
    line-height: 12;
}

.field-title {
    font-weight: bold;
    font-size: 16;
    margin: 15 0 5 0;
    color: #1C3E4C;
}

.lbl {
    color: #A8B4B9;
}

.display {
    color: #1C3E4C;
    font-size: 14;
    font-weight: bold;
    margin: 5 0 0 15;
}

.clickable-field .icon {
    color: #A8B4B9;
}

.note {
    color: #A8B4B9;
    font-family: 'Roboto-Regular', Roboto-Regular;
    font-size: 12;
    font-weight: bold;
}

Nothing really special about it. This started happening after I migrated the app from NS6 to NS8.

I tried cleaning up the project via "ns clean" and running the build again, but this did not help. This also happens when I build for Android.

Any idea what is happening and how to resolve it?

Thank you.

Answer 1

It turned out that the culprit was the Typescript. As soon as I upgraded it to version 5 everything worked fine.