ionic-team / ionic-team/ionic-framework

bug: Cannot build a project with a top level await within it dependancies with ionic angular.

未关闭
#29,939 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
triage
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v7.x

### Current Behavior

Installing bson-js and using it breaks the ionic build process because of a top level await statement.

### Expected Behavior

Ionic angular should be able to build projects with modern features.

### Steps to Reproduce

```
npm install @ionic/cli -save-dev
./node_modules/bin/ionic init

cd
npm install bson --save-dev
```

Add a trivial usage of the library using a top level await:

```
import { Component } from '@angular/core';
import { BSON } from "bson";
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {

constructor() {
BSON.serialize({"a":1});
}

}
```

Edit angular.json file to support ESBuild:

```
"build": {
"builder": "@angular-devkit/build-angular:browser-esbuild",
```

Attempt build with watch

```npm run watch```

Observe output:

```
▲ [WARNING] The glob pattern import("./**/*.entry.js*") did not match any files [empty-glob]

node_modules/@stencil/core/internal/client/index.js:82:2:
82 │ `./${bundleId}.entry.js${BUILD4.hotModuleReplacement && hmrVersi...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Top-level await is not available in the configured target environment ("chrome89.0", "edge79.0", "firefox70.0", "ios14.0", "safari14.0" + 9 overrides)

node_modules/bson/lib/bson.mjs:192:26:
192 │ const nodejsRandomBytes = await (async () => {
```

Edit .browserslistrc file from:

```
Chrome >=89
ChromeAndroid >=79
Firefox >=70
Edge >=79
Safari >=14
iOS >=14
```

To [correct versions in order to use feature](https://caniuse.com/?search=top%20level%20await):

```
Chrome >=129
ChromeAndroid >=129
Firefox >=130
Edge >=129
Safari >=18
iOS >=18

```

Attempt to build again:

```npm run watch```

```
✘ [ERROR] Top-level await is not available in the configured target environment ("chrome129.0", "edge129.0", "firefox130.0", "ios18.0", "safari18.0" + 5 overrides)

node_modules/bson/lib/bson.mjs:192:26:
192 │ const nodejsRandomBytes = await (async () => {
╵ ~~~~~
```

### Code Reproduction URL

https://github.com/jk89/ionic-bson-bug

### Ionic Info

```
{
"name": "auth",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"description": "",
"devDependencies": {
"@ionic/cli": "^7.2.0"
}
}
./node_modules/.bin/ionic info
_ _
(_) ___ _ __ (_) ___
| |/ _ \| '_ \| |/ __|
| | (_) | | | | | (__
|_|\___/|_| |_|_|\___| CLI 5.4.16

Usage:

$ ionic [] [--help] [--verbose] [--quiet] [--no-interactive] [--no-color] [--confirm] [options]

Global Commands:

completion ...................... (experimental) Enables tab-completion for Ionic CLI commands.
config ............. Manage CLI and project config values (subcommands: get, set, unset)
docs ............................ Open the Ionic documentation website
info ............................ Print project, system, and environment information
init ............................ (beta) Initialize existing projects with Ionic
login ........................... Log in to Ionic
logout .......................... Log out of Ionic
signup .......................... Create an Ionic account
ssh ................ Commands for configuring SSH keys (subcommands: add, delete, generate, list,
setup, use)
start ........................... Create a new project

Project Commands:

You are not in a project directory.
```

### Additional Information

Note that this is not just bson. I've had issues with stripe as well. We can expect to see a lot more libraries using this feature over time.

贡献指南

打开贡献指南

调研方向

Reproduce the failure using the linked project, then inspect angular.json, .browserslistrc, and node_modules/bson/lib/bson.mjs around the reported top-level await. Compare the Ionic Angular build behavior with the configured browser targets and verify the watch build outcome after any supported configuration or build-system change.

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
build-system, frontend
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。