安装firebase后运行项目提示Failed to resolve module specifier "firebase/app"

问题原因 #

1. 你使用浏览器原生ES模块加载JS，浏览器不支持裸模块导入语法import { xx } from "firebase/app"，不会主动去node_modules目录下查找对应依赖，因此会抛出模块解析失败的报错
2. 代码末尾执行console.log(firebase)，但你全程没有声明过firebase变量，就算模块导入成功也会抛出变量未定义的错误

解决方案 #

方案一：无需打包工具，直接用全局脚本引入（适合小型原生项目）

在HTML的head中新增Firebase的引入脚本，不需要再用import导入依赖：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>TP1</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <!-- 新增Firebase引入脚本 -->
        <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
        <!-- 后续要使用数据库的话再加这行 -->
        <!-- <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database-compat.js"></script> -->
        <script type="module" src="/index.js"> </script>
    </head>
    <body>

对应修改index.js代码即可：

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

const app = firebase.initializeApp(firebaseConfig);
// 直接打印初始化后的实例即可，不需要打印未定义的firebase变量
console.log(app);

方案二：使用打包工具处理npm依赖（适合正式项目）

如果你要使用npm安装的Firebase依赖，需要用前端打包工具处理模块导入逻辑：

• 新建Vite/Webpack项目，将现有代码迁移到项目目录下
• 执行npm i firebase安装依赖
• 原有import { initializeApp } from "firebase/app"语法可以直接使用，同样将console.log(firebase)修改为console.log(app)即可正常运行

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