引入Firebase后Chrome报Cannot use import statement outside a module如何解决

• ES6 的 import 导入语法仅支持在标记为模块类型的脚本中使用，你当前使用的 <script> 标签未添加 type="module" 属性，浏览器默认将其识别为传统脚本，不支持 import 语法，直接抛出语法错误。
• 你通过 npm install firebase 安装的依赖存放在项目的 node_modules 目录下，直接用本地文件协议打开 HTML 文件时，浏览器无法解析 firebase/app 这类裸导入路径，也没有权限直接读取本地 node_modules 目录下的文件，即便添加模块声明也会后续触发路径找不到的错误。

方案1：无需构建工具，快速测试用 #

直接修改 HTML 代码，使用全局引入的 Firebase SDK 即可，无需依赖本地安装的 npm 包，修改后的代码示例如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>User Auth</title>
  <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-analytics.js"></script>
</head>
<body>
  <h1>User Auth</h1>

<script>
  const firebaseConfig = {
    apiKey: "AIzaSyC5zv8b1wfc0ykmpULeFI6tJa6Grk",
    authDomain: "user-auth-75223.firebaseapp.com",
    projectId: "user-auth-78563",
    storageBucket: "user-auth-78563.appspot.com",
    messagingSenderId: "482788408547",
    appId: "1:482788408547:web:89e3ecdc24f3454576c00aa",
    measurementId: "G-VK5D45CCJ2"
  };

  const app = firebase.initializeApp(firebaseConfig);
  const analytics = firebase.getAnalytics(app);
</script>
</body>
</html>

方案2：本地构建服务，适合正式开发 #

你已经安装了 npm 版本的 Firebase，只需要搭配前端构建工具启动本地开发服务即可，操作步骤如下：

• 项目目录下执行 npm install -g vite 安装轻量构建工具 Vite，你也可以替换为其他你熟悉的构建工具。
• 给原有 index.html 中的 script 标签添加 type="module" 属性，修改后为 <script type="module">。
• 项目目录下执行 vite 启动本地开发服务，用浏览器访问控制台输出的本地服务地址（默认是 http://localhost:5173）即可正常运行。

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