Bug: esbuild builder 3rd party libs built not properly with browserify paths

リンクされた再現リポジトリをクローンし、npm install と ng serve を実行して、Vite の外部化警告とランタイムエラーを確認します。esbuild builder が tsconfig.json のパスマッピングと package.json のブラウザマッピングをどのように処理するかを調査します。fhir 依存関係が stream 警告や prototype エラーなしで読み込まれれば完了です。

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

none

Description

We're currently in the evaluation of replacing the Webpack with ESBuild process from Angular.

The only blocker right now is, that the path replacements for the building process does not work as expected and the application directly crashes into a white screen.

Minimal Reproduction

https://github.com/JohnnyDevNull/angular17-esbuild-browserify-error

1. Checkout the mentioned reproduction repo
2. npm install
3. ng serve

Open the app and you will directly see an Vite warning and the error from the 3rd party library we are using fhir in this case for the healthcare sector.

Module "stream" has been externalized for browser compatibility. Cannot access "stream.Stream" in client code. See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')

As you can see in the configs below I've added the paths and browser properties to help esbuild understand the mapping, but it does not work anyways.

Just to mention, the 3rd party library is a CommonJS library, which we cannot avoid here, so its added to the allowedCommonJsDependencies configuration.

tsconfig.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": false,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ],
    "baseUrl": ".",
    "paths": {
      "stream": ["node_modules/stream-browserify"]
    }
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

package.json

{
  "name": "ng-dummy",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "fhir": "^4.12.0",
    "rxjs": "~7.8.0",
    "stream-browserify": "^3.0.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.4",
    "@angular/cli": "^17.3.4",
    "@angular/compiler-cli": "^17.3.0",
    "@types/fhir": "^0.0.41",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.2"
  },
  "browser": {
    "stream": "stream-browserify"
  }
}

Exception or Error

Module "stream" has been externalized for browser compatibility. Cannot access "stream.Stream" in client code. See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 17.3.4
Node: 18.19.1
Package Manager: npm 10.2.4
OS: darwin arm64

Angular: 17.3.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.4
@angular-devkit/build-angular   17.3.4
@angular-devkit/core            17.3.4
@angular-devkit/schematics      17.3.4
@schematics/angular             17.3.4
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.4

Anything else relevant?

This issue was already reported with https://github.com/angular/angular-cli/issues/26901 but sadly to say closed. I hope you have now a better picture with my simple reproduction repo.