Flutter Web接入Firebase报Cannot use import statement outside a module错误

云上老周

2026-9-28

错误核心原因

你当前的错误完全来自index.html的配置冲突：

普通<script>标签默认不支持ES模块import语法，必须添加type="module"属性才可以使用，这是你报错的直接诱因
配置逻辑混用了两种Firebase接入方案：同时引入了Firebase 8版本的全局CDN，又写了仅Firebase 9+版本支持的compat导入语句，版本完全不匹配
你修改的是build/web目录下的index.html，该目录是编译产物目录，每次执行flutter build web都会被覆盖，修改完全不生效

修复步骤

1. 修改项目配置文件

找到项目根目录下web文件夹内的index.html，替换原有Firebase相关的全部script代码为以下内容：

<!-- 引入和你本地Firebase版本匹配的compat版本CDN -->
<script src="https://www.gstatic.com/firebasejs/9.21.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.21.0/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.21.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.21.0/firebase-storage-compat.js"></script>
<script>
const firebaseConfig = {
   apiKey: "", // 替换为你自己的项目配置
   authDomain: "",
   projectId: "",
   storageBucket: "",
   messagingSenderId: "",
   appId: ""
};
// 直接使用全局挂载的firebase对象初始化，无需import
firebase.initializeApp(firebaseConfig);
</script>