初始化@nuxtjs/firebase模块报错找不到firebase/compat/app如何解决

根因说明 #

报错由两个核心问题导致：@nuxtjs/firebase与firebase版本不兼容、缺失firebase的compat兼容层依赖，或是依赖安装位置、本地缓存异常。

步骤1：安装匹配版本的依赖 #

先卸载现有冲突的包：

npm uninstall @nuxtjs/firebase firebase

再安装经过验证的兼容版本，@nuxtjs/firebase v8 适配firebase v9版本，自带compat兼容层：

npm install @nuxtjs/firebase@8.2.2 firebase@9.23.0

注意：不要安装firebase v10+版本，该版本与当前稳定版@nuxtjs/firebase的compat层调用不兼容

步骤2：修正nuxt.config.js配置 #

针对SSR场景，需要开启analytics的服务端渲染支持，配置调整如下：

modules: [
  '@nuxtjs/firebase',
],
firebase: {
  config: {
    apiKey: '<apiKey>',
    authDomain: '<authDomain>',
    databaseURL: '<databaseURL>',
    projectId: '<projectId>',
    storageBucket: '<storageBucket>',
    messagingSenderId: '<messagingSenderId>',
    appId: '<appId>',
    measurementId: '<measurementId>' // 必须正确填写，为analytics必填参数
  },
  services: {
    analytics: {
      ssr: true // SSR应用必须开启，避免服务端渲染时报错
    }
  }
}

步骤3：清理缓存重新运行 #

依次执行以下命令清理无效缓存，再启动项目：

rm -rf .nuxt node_modules package-lock.json
npm install
npm run dev

额外排查点 #

• 检查package.json中@nuxtjs/firebase和firebase是否位于dependencies字段下，不要放在devDependencies中，SSR部署时需要运行时加载这两个依赖
• 如果你使用的是Nuxt 3，@nuxtjs/firebase不支持该版本，需切换为Nuxt官方适配的firebase模块或者vuefire集成方案

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