angular / angular/angular-cli

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

Đang mở
#27,495 5 bình luận 1 reaction 0 người được giao Xem trên GitHub
angular/build:dev-server area: @angular/build freq1: low severity3: broken type: bug/fix
Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
14 giờ 23 phút
Pull request đã merge (30 ngày)
162

Mô tả

### 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.
```

![Bildschirmfoto 2024-04-18 um 11 30 19](https://github.com/angular/angular-cli/assets/5759334/0fa0d4cb-afde-4aab-8c85-9e44ef774bb7)

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

![Bildschirmfoto 2024-04-18 um 11 30 30](https://github.com/angular/angular-cli/assets/5759334/d3715cc0-7127-4c04-a88f-c6f3efcc2618)

![Bildschirmfoto 2024-04-18 um 11 30 43](https://github.com/angular/angular-cli/assets/5759334/d310b1ed-30cf-4a06-a424-6ddff74e101c)

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

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

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.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Clone repository tái hiện được liên kết, chạy npm install và ng serve, rồi xác nhận cảnh báo externalization của Vite và lỗi runtime. Kiểm tra cách esbuild builder xử lý ánh xạ đường dẫn trong tsconfig.json và ánh xạ trình duyệt trong package.json; hoàn tất khi dependency fhir được tải mà không có cảnh báo stream hoặc lỗi prototype.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
build-system, cli
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.