Description
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
- Checkout the mentioned reproduction repo
npm installng 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 #26901 but sadly to say closed. I hope you have now a better picture with my simple reproduction repo.