ServiceStack/Client and "Reading from "node:fs" is not handled by plugins (Unhandled scheme)." error

[BZ1234567890]

I am trying to upgrade from the 1.X ServiceStack/Client library to the 2.X version
I got the following error when running "ng build" after the upgrade (latest 1.X works fine):

node:fs - Error: Module build failed: UnhandledSchemeError: Reading from "node:fs" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

node:path - Error: Module build failed: UnhandledSchemeError: Reading from "node:path" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

What could potentially be the problem?

This is the list of installed npm packages:

+-- @angular-devkit/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @ng-bootstrap/[email protected]
+-- @ngx-translate/[email protected]
+-- @ngx-translate/[email protected]
+-- @popperjs/[email protected]
+-- @servicestack/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

npm -v: 9.6.0

node -v: v18.14.2

That is my package.json:

{
  "name": "portal",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "echo Starting 'ng serve'... && ng serve",
    "start:iis": "echo Starting 'ng build --watch'... && ng build --watch",
    "build": "ng build",
    "build:ssr": "ng run Portal:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ngcc"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "14.2.12",
    "@angular/common": "14.2.12",
    "@angular/compiler": "14.2.12",
    "@angular/core": "14.2.12",
    "@angular/forms": "14.2.12",
    "@angular/platform-browser": "14.2.12",
    "@angular/platform-browser-dynamic": "14.2.12",
    "@angular/router": "14.2.12",
    "@ng-bootstrap/ng-bootstrap": "13.1.1",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "@popperjs/core": "^2.11.6",
    "@servicestack/client": "^2.0.7",
    "angular-code-input": "^1.6.0",
    "bootstrap": "^5.2.3",
    "core-js": "^3.29.0",
    "google-libphonenumber": "^3.2.32",
    "jquery": "^3.6.3",
    "node-fs": "^0.1.7",
    "rxjs": "^7.8.0",
    "ts-node": "^10.9.1",
    "tslib": "^2.5.0",
    "zone.js": "^0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "14.2.10",
    "@angular/cli": "14.2.10",
    "@angular/compiler-cli": "14.2.12",
    "@angular/language-service": "14.2.12",
    "@types/google-libphonenumber": "^7.4.23",
    "@types/node": "^18.14.6",
    "node-libs-browser": "^2.2.1",
    "typescript": "4.8.4"
  },
  "optionalDependencies": {
    "tslint": "~6.1.3"
  }
}

That's my tsconfig:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "experimentalDecorators": true,
    "types": [ "node" ],
    "target": "es2020"
  },
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

That's my angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": false
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Portal": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "progress": false,
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true,
            "allowedCommonJsDependencies": [ "google-libphonenumber", "@servicestack/client" ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          },
          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "Portal:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "Portal:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Portal:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [ "src/styles.css" ],
            "scripts": [],
            "assets": [ "src/assets" ]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist-server",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.server.json",
            "sourceMap": true,
            "optimization": false
          },
          "configurations": {
            "dev": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true
            },
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true
            }
          },
          "defaultConfiguration": ""
        }
      }
    },
    "Portal-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "Portal:serve"
          }
        }
      }
    }
  }
}

[mythz]

should be resolved in latest @servicestack/client v2.0.8, see: https://stackoverflow.com/a/75633657/85785

[BZ1234567890]

Thanks, yes it seems to be resolved in v2.0.8. Now, it compiles successfully, without errors.

But it does print out the following two warnings:

./node_modules/@servicestack/client/dist/index.js:3546:65-76 - Warning: Critical dependency: the request of a dependency is an expression

./node_modules/@servicestack/client/dist/index.js:3549:69-80 - Warning: Critical dependency: the request of a dependency is an expression

Any way to avoid these two warnings?

[mythz]

No, there's no way to prevent Angular/webpack from analyzing guarded dynamic imports without warnings, either they try to statically resolve the dependency which results in the first error, or the workaround of using a expression for the dynamic import which results in these warnings indicating they're not able to analyze the dependency at compile time - i.e. the goal of the workaround to resolve the initial error.

Unfortunately there's no way to tell Angular to completely ignore or strip this unused code path without warnings, which will emit warnings until there is.

[BZ1234567890]

OK, thanks for the info.