Compiling Angular app with fabricjs fails on missing node depedencies

Question

I am upgrading an Angular app that uses fabricjs. The old app was dependent on node14 and I am upgrading to A17, so can use node18.

When I compile, I get a lot of errors like this

✘ [ERROR] Could not resolve "path"

    node_modules/jsdom/lib/jsdom/utils.js:3:21:
      3 │ const path = require("path");
        ╵                      ~~~~~~

  The package "path" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

This occurs because fabricjs used jsdom, and jsdom uses native node functions.

But my app is for the browser, and shouldn't be dependent on node (except for the build).

I am confused by both "how did an angular browser app running fabricjs work before" and what changed - what do I need to do to get it to compile?"

Unless I am misunderstanding, the s=uggestion in the error message doesn't make sense since the app will run in the browser, not in node.

Help?

I've just come back around to this issue and I am now on A19.

package.json:

{
  "name": "company-box-ui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --configuration development",
    "build": "ng build fedex-ui",
    "build-prod": "ng build --configuration production fedex-ui",
    "build-local": "ng build --configuration local fedex-ui",
    "start-local": "ng serve --host 0.0.0.0 --port 4202 --configuration local fedex-ui",
    "build-local-sandbox": "ng build --configuration local-sandbox fedex-ui",
    "start-local-sandbox": "ng serve --host 0.0.0.0 --port 4202 --configuration local-sandbox fedex-ui",
    "build-sandbox": "ng build --configuration sandbox fedex-ui",
    "start-sandbox": "ng serve --host 0.0.0.0 --port 4202 --configuration sandbox fedex-ui",
    "build-admin": "ng build admin-ui",
    "build-admin-prod": "ng build --configuration production admin-ui",
    "build-admin-local-sandbox": "ng build --configuration local-sandbox admin-ui",
    "start-admin-local-sandbox": "ng serve --host 0.0.0.0 --port 4201 --configuration local-sandbox admin-ui",
    "build-admin-sandbox": "ng build --configuration sandbox admin-ui",
    "start-admin-sandbox": "ng serve --host 0.0.0.0 --port 4201 --configuration sandbox admin-ui",
    "watch": "ng build --watch --configuration development",
    "test": "npx playwright test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^19.0.4",
    "@angular/cdk": "^19.0.3",
    "@angular/common": "^19.0.4",
    "@angular/compiler": "^19.0.4",
    "@angular/core": "^19.0.4",
    "@angular/forms": "^19.0.4",
    "@angular/material": "^19.0.3",
    "@angular/platform-browser": "^19.0.4",
    "@angular/platform-browser-dynamic": "^19.0.4",
    "@angular/router": "^19.0.4",
    "@ng-select/ng-select": "^14.1.0",
    "angular-user-idle": "^4.0.0",
    "bootstrap": "^5.3.3",
    "chart.js": "^4.4.3",
    "crypto-js": "^4.2.0",
    "fabric": "~5.3.0",
    "js-file-download": "^0.4.12",
    "lodash.debounce": "^4.0.8",
    "logrocket": "^9.0.1",
    "moment": "^2.30.1",
    "ng-multiselect-dropdown": "^1.0.0",
    "ng2-avatar": "^2.3.1",
    "ng2-charts": "^6.0.1",
    "ng2-pdfjs-viewer": "^18.0.0",
    "ngx-avatars": "^1.8.0",
    "ngx-bootstrap": "^19.0.1",
    "ngx-clipboard": "^16.0.0",
    "ngx-dropzone": "^3.1.0",
    "ngx-dropzone-wrapper": "^17.0.0",
    "ngx-logger": "^5.0.12",
    "ngx-moment": "^6.0.2",
    "ngx-ui-switch": "^15.0.0",
    "nxt-sortablejs": "^19.0.4",
    "pace-js": "^1.2.4",
    "popper.js": "^1.16.1",
    "rxjs": "~7.8.1",
    "sortablejs": "^1.15.6",
    "spinkit": "^2.0.1",
    "three": "^0.170.0",
    "tslib": "^2.6.2",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.0.4",
    "@angular/cli": "^19.0.4",
    "@angular/compiler-cli": "^19.0.4",
    "@playwright/test": "^1.48.2",
    "@types/crypto-js": "^4.2.2",
    "@types/fabric": "^5.3.7",
    "@types/jquery": "^3.5.30",
    "@types/lodash": "^4.17.13",
    "@types/moment": "^2.13.0",
    "@types/moment-timezone": "^0.5.13",
    "@types/node": "^22.9.0",
    "@types/three": "^0.170.0",
    "jasmine-core": "~5.1.2",
    "karma": "~6.4.3",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.1",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "ng-packagr": "^19.0.1",
    "typescript": "~5.6.3"
  }
}

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "skipLibCheck": true,
    "baseUrl": "./",
    "downlevelIteration": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}