如何解决Storybook中使用BSON库时的顶层await构建错误？

当导入bson包的ObjectId时，构建报错提示顶层await在当前目标环境不可用，这是因为bson的部分版本使用了ES2022的顶层await特性，但项目默认的构建目标（ES2020及对应浏览器版本）不支持该语法。

解决方案 #

1. 升级构建目标环境以支持顶层await #

顶层await是ES2022的特性，修改Storybook的Vite配置，将构建目标升级到支持它的版本。在.storybook/main.js中添加：

export default {
  async viteFinal(config) {
    // 直接指定ES版本
    config.build.target = 'es2022';
    // 或者指定具体浏览器版本（需支持顶层await）
    // config.build.target = ['chrome105', 'edge105', 'firefox102', 'safari15.4'];
    return config;
  },
};

2. 配置Esbuild单独转译bson包 #

如果不想全局升级目标环境，可以让Esbuild在依赖预构建阶段就处理bson的顶层await。修改.storybook/main.js：

export default {
  async viteFinal(config) {
    config.optimizeDeps = {
      esbuildOptions: {
        target: 'es2022',
      },
    };
    // 同时确保生产构建的Esbuild配置同步更新
    config.build.esbuild = {
      target: 'es2022',
    };
    return config;
  },
};

3. 改用无顶层await的bson版本或导入方式 #

• 降级bson版本：在package.json中指定不包含顶层await的旧版本，比如：

  "dependencies": {
    "bson": "^4.7.2"
  }
  

  执行npm install更新依赖后重新构建。
• 直接导入CommonJS模块：修改导入语句，避开使用顶层await的入口文件：

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

修改配置后，执行npm run build-storybook即可正常构建。

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