Firebase本地导入失败 报auth组件未注册运行时错误

• 核心诱因是混用了两套完全隔离的Firebase SDK引入源：你同时使用npm install安装的本地Firebase包、gstatic域名下的CDN版Firebase SDK，两个版本的SDK运行上下文互不连通，CDN引入的Auth、Firestore模块没有注册到本地包初始化的Firebase实例上，直接触发Component auth has not been registered yet报错。
• CDN路径导入是给无构建工具的原生HTML/JS项目设计的用法，基于React的打包工程不需要、也不应该使用HTTPS路径导入已经通过npm安装的依赖，重复导入同一模块的不同版本还会引发实例不一致、方法调用失效等连锁问题。
• 你提到的无法使用本地模块化导入语法的问题和Node.js版本无关，本质是错误保留CDN导入写法导致的运行/解析异常。

1. 修正Firebase配置文件 #

删除配置文件中所有CDN导入语句，全部改用本地npm包路径导入，修正后代码如下：

// 所有模块统一从本地安装的firebase包导入，不要使用HTTPS形式的CDN路径
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  // 替换为你自己的Firebase项目配置参数
};

export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);

2. 修正App.js导入逻辑 #

删除App.js中所有从CDN路径导入Firebase方法的语句，所有Firebase相关方法统一从本地npm包或者自定义的firebase配置文件导入，修正后的导入段代码如下：

import React from 'react';
// 从自定义配置文件导入已经初始化完成的auth、db实例
import {auth, db} from './firebase';
// Firestore相关方法统一从本地包导入
import {
  collection,
  getDocs,
  onSnapshot,
  addDoc,
  deleteDoc,
  doc,
  getDoc,
  updateDoc
} from 'firebase/firestore';
// Auth相关方法统一从本地包导入
import { 
  createUserWithEmailAndPassword, 
  onAuthStateChanged,
  signInWithEmailAndPassword,
  signOut
} from 'firebase/auth';

注意：getFirestore、getAuth已经在配置文件中调用完成并导出了实例，不需要在App.js里重复调用。

3. 修复代码中的方法调用错误 #

你之前写的删除逻辑存在API调用错误：deleteDoc是从SDK导入的顶层方法，不是db实例上的挂载方法，将eliminar函数修正为：

const eliminar = async (id) => {
  try {
    const articleToDelete = doc(db,`Articulos/${id}`)
    // 错误写法：db.deleteDoc(articleToDelete)
    await deleteDoc(articleToDelete)
    const arrayFiltrado = tareas.filter(item => item.id !== id)
    setTareas(arrayFiltrado)
  } catch (error) {
    console.log(error)
  }
}

4. 验证修复 #

如果改完导入后提示找不到firebase相关模块，先执行npm list firebase确认安装的版本为9.0.0以上的模块化版本，版本不符就执行npm install firebase@latest安装最新稳定版。确认版本无误后，停掉当前运行的开发服务，重新执行启动命令（CRA项目用npm start，Vite项目用npm run dev），之前的报错就会消失。

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