无法导入Firebase，报Cannot use import statement outside a module如何解决

这个报错的本质是浏览器默认将普通<script>标签加载的JS文件识别为标准脚本，不支持ES6的import模块化语法，只有被标记为模块的脚本才支持该语法。

你可以根据自己的项目场景选择以下任意一种解决方案：

• 方案1：给引入脚本的<script>标签添加type="module"属性
  如果你直接把初始化代码写在HTML的<script>标签里，修改标签属性即可：

  <script type="module">
  // 注意：直接在浏览器中import npm包时，要写完整的可访问路径，不能直接写`firebase/app`
  // 如果你不想处理路径问题，可以直接用Firebase官方提供的ES模块CDN地址
  import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js'
  
  const firebaseConfig = {
    // 替换为你的Firebase项目配置
  };
  
  const app = initializeApp(firebaseConfig);
  </script>
  

• 方案2：使用兼容普通脚本的UMD格式Firebase SDK
  不需要使用import语法，直接通过全局firebase对象调用API即可：
  1. 先在head中引入Firebase兼容版SDK：

  <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
  

  2. 直接写初始化代码：

  const firebaseConfig = {
    // 替换为你的Firebase项目配置
  };
  
  const app = firebase.initializeApp(firebaseConfig);
  

• 方案3：基于构建工具的项目校验
  如果你是用Vite、Webpack等构建工具开发的项目，出现该报错请检查：
  • 入口HTML中引入打包后JS的<script>标签是否加了type="module"属性
  • 构建工具的输出配置是否设置为支持ES模块格式

标记为type="module"的脚本默认会延迟加载，不会阻塞DOM解析，如果你的初始化逻辑依赖页面DOM元素，可在代码中监听DOMContentLoaded事件后再执行对应逻辑。

内容的提问来源于stack exchange，提问作者Sense of Science