如何解决Nuxt 2升级Nuxt Bridge时@nuxtjs/firebase引发的webpack报错

问题原因 #

旧版@nuxtjs/firebase仅适配Nuxt2的CommonJS配置规范，升级Nuxt Bridge后配置切换为ES模块导出规范，加上Bridge默认启用的新编译逻辑和旧模块加载逻辑不兼容，就会触发webpack编译报错。

修复步骤 #

• 第一步：升级@nuxtjs/firebase到8.0.0及以上版本，该版本已适配Nuxt Bridge的ES模块配置规则
• 第二步：在nuxt.config的defineNuxtConfig配置项中添加转译规则，让webpack对该模块做兼容处理：

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  // 原有其他配置
  build: {
    transpile: ['@nuxtjs/firebase']
  }
})

• 第三步：如果开启了Bridge的Vite模式仍然报错，可临时关闭Vite回退到兼容Webpack模式：

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  // 原有其他配置
  bridge: {
    vite: false
  },
  build: {
    transpile: ['@nuxtjs/firebase']
  }
})

• 备选方案：如果以上配置都不生效，可暂时移除@nuxtjs/firebase模块，改为手动引入Firebase SDK的方式调用相关能力，等完全升级到Nuxt3后再替换为Nuxt3适配的Firebase集成模块。

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