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

[JohnnyDevNull]

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.

[JohnnyDevNull]

As additional info... it seems just a problem with the Vite Dev Server because when I build and serve the app it works:

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

ng build --source-map
npx serve dist/ng-dummy/browser

This is a little bit confusing, because I would assume that the dev server works not that seriously different from building the app?

[Alex-2801]

Are there any news about this topic? We cannot move forward to esbuild because of this Bug.

[Carlosamouco]

@Alex-2801, can you try to run ng serve with prebundle set to false and check if it works?

The server command is inconsistent with the build command and disabling prebundling might help.

[Alex-2801]

@Carlosamouco thanks a lot. Adding --prebundle=false worked 👍

Edit: Of course its also possible to add it in the project.json