webpack项目引入Firebase出现模块解析错误该如何解决？

问题根因 #

• 第一个报错import declarations may only appear at top level of a module是因为浏览器默认把<script>引入的文件当做普通脚本，不支持ES模块的import语法，只有标注type="module"的脚本才支持该语法。
• 第二个报错是因为浏览器原生ES模块仅支持带明确相对/绝对路径的导入，firebase/app属于裸模块导入，只有webpack这类打包工具能识别并从node_modules目录中定位对应模块，直接在浏览器中运行源文件无法解析该导入路径。
• 额外错误：你同时引入了未打包的源文件./src/assets/form.js和webpack打包后的产物./dist/main.js，属于重复引入，完全多余。

解决方案 #

场景1：正常使用webpack构建项目（推荐） #

1. 先确认你已经在项目根目录执行过npm install firebase安装了Firebase依赖。
2. 把你写的form.js纳入webpack的打包依赖链：在webpack配置的入口文件（通常是src下的index.js）中添加导入语句import './assets/form.js'。
3. 修改HTML中的引入代码，删掉单独引入form.js的行，只保留打包后的产物引入即可：

<script src="./dist/main.js"></script>

webpack打包时会自动解析firebase/app的裸导入，将所有相关代码打包进main.js，无需给script标签加type="module"属性，即可正常运行。

场景2：不需要webpack打包，直接在浏览器中运行form.js #

如果你暂时不需要走webpack构建流程，要直接运行源文件，修改form.js的导入语句为Firebase官方提供的CDN ES模块路径即可：

// 替换原来的import语句
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";

// 后续的firebaseConfig和初始化代码保持不变

然后HTML中仅保留form.js的引入，加上type="module"属性即可：

<script type="module" src="./src/assets/form.js"></script>

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