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

[jk89]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing 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
<select angular and wait for install>
cd <project dir>
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:

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 <command> [<args>] [--help] [--verbose] [--quiet] [--no-interactive] [--no-color] [--confirm] [options]

  Global Commands:

    completion ...................... (experimental) Enables tab-completion for Ionic CLI commands.
    config <subcommand> ............. 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 <subcommand> ................ 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.