使用Rollup打包Firebase项目时出现XhrIo导出错误求助

完整错误信息 #

[!] RollupError: "XhrIo" is not exported by "node_modules/@firebase/webchannel-wrapper/dist/index.js", imported by "node_modules/@firebase/firestore/dist/index.esm2017.js"

问题背景 #

使用Rollup 3.8.1打包TypeScript Web应用，集成Firebase 9.15.0时触发上述错误。核心原因是@firebase/firestore的ESM入口文件尝试从@firebase/webchannel-wrapper导入XhrIo，但Rollup解析时优先选择了该包的主入口文件（main字段对应的dist/index.js），而非专门的模块入口（module字段对应的dist/index.esm2017.js）。

@firebase/webchannel-wrapper的package.json相关配置：

{
  "main": "dist/index.js",
  "module": "dist/index.esm2017.js",
  "esm5": "dist/index.esm.js"
}

应用核心代码：

import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'

// ...

// 初始化Firebase
export const firebaseApp = initializeApp(firebaseConfig)
export const db = getFirestore(firebaseApp)

tsconfig.json关键配置：

{
  "target": "es2022",
  "module": "esnext",
  "moduleResolution": "node"
}

解决方案 #

1. 调整@rollup/plugin-node-resolve的解析优先级 #

在Rollup配置文件中，修改@rollup/plugin-node-resolve的mainFields参数，让它优先读取module字段指定的入口：

import resolve from '@rollup/plugin-node-resolve';

export default {
  // 其他配置...
  plugins: [
    resolve({
      mainFields: ['module', 'main'], // 优先解析module入口
      extensions: ['.js', '.ts']
    }),
    // 其他插件（如typescript插件）...
  ]
};

2. 用alias强制指定ESM入口 #

如果第一种方法无效，通过@rollup/plugin-alias直接映射@firebase/webchannel-wrapper到它的ESM文件：

import alias from '@rollup/plugin-alias';
import resolve from '@rollup/plugin-node-resolve';

export default {
  // 其他配置...
  plugins: [
    alias({
      entries: [
        { find: '@firebase/webchannel-wrapper', replacement: '@firebase/webchannel-wrapper/dist/index.esm2017.js' }
      ]
    }),
    resolve(),
    // 其他插件...
  ]
};

3. 更新依赖版本 #

尝试升级Rollup到最新稳定版，或者将Firebase相关依赖更新到兼容版本，部分版本间的兼容性问题可能导致模块解析异常。

4. 修改TypeScript的模块解析策略 #

将tsconfig.json中的moduleResolution改为bundler（需TypeScript 4.7及以上版本），更适配打包工具的解析逻辑：

{
  "moduleResolution": "bundler"
}

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