导入BSON库时提示‘The top-level-await experiment is not enabled’错误求助

问题原因 #

BSON库的ES模块版本（bson.mjs）使用了顶层await语法，但Angular默认的Webpack配置未启用topLevelAwait实验特性，导致编译报错。

解决方案 #

方案1：通过自定义Webpack配置启用topLevelAwait

1. 安装自定义Webpack构建依赖

npm install @angular-builders/custom-webpack --save-dev

2. 在项目根目录创建webpack.config.js文件，添加以下配置：

module.exports = {
  experiments: {
    topLevelAwait: true
  }
};

3. 修改angular.json中的构建配置：
   • 将build的builder替换为@angular-builders/custom-webpack:browser
   • 将serve的builder替换为@angular-builders/custom-webpack:dev-server
   • 在build的options中添加customWebpackConfig字段指定配置文件路径
     示例配置片段：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 保留原有其他配置项
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    // 保留原有其他配置项
  }
}

4. 重启Angular开发服务，重新编译项目。

方案2：降级BSON版本至无顶层await的旧版本

安装4.x系列的BSON版本（该版本未使用顶层await）：

npm install bson@4.7.2 --save

安装完成后保持原导入语句不变即可：

import { ObjectId } from 'bson';

方案3：直接导入BSON的CommonJS版本

修改导入语句，直接引用BSON的CommonJS模块文件，绕过ES模块的顶层await问题：

import { ObjectId } from 'bson/lib/bson';

内容的提问来源于stack exchange，提问作者Miko Chu