firebase/messaging未导出getToken及ESM引入报错问题求助

一、npm安装Firebase后导入messaging模块报错 #

针对SyntaxError: The requested module 'firebase/messaging' does not provide an export named 'getToken'或找不到getMessaging的问题，按以下步骤排查：

1. 重新安装依赖
   删除项目根目录下的node_modules文件夹和package-lock.json文件，然后执行：

npm install

确保依赖包完整且无损坏。

2. 确认导入路径正确性
   Firebase SDK 9+模块化版本中，messaging相关API的导入路径无误，代码应为：

import { getMessaging, getToken } from "firebase/messaging";

3. 检查运行环境
   如果是直接在浏览器中使用npm安装的包（未通过Vite、Webpack等打包工具处理），浏览器无法解析node_modules内的模块路径，此时建议改用CDN ESM方式，或引入打包工具构建项目。

二、CDN ESM导入提示Cannot use import statement outside a module #

这个问题是因为浏览器未将你的脚本识别为ES模块，解决方法如下：

1. 修改HTML中的脚本引用
   在引用你的firebase.js（或自定义脚本文件）时，必须添加type="module"属性：

<script type="module" src="./firebase.js"></script>

2. 使用正确的CDN导入格式
   确保所有Firebase服务的导入都使用官方CDN的ESM链接，完整示例代码：

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js';
import { getMessaging, getToken } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-messaging.js';

const firebaseConfig = {
  // 你的Firebase配置信息
};

const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

// 请求通知权限并获取Token
Notification.requestPermission().then((permission) => {
  if (permission === 'granted') {
    getToken(messaging, { vapidKey: "my_wap_public_key_here" })
      .then((token) => {
        console.log('获取到的Token:', token);
      })
      .catch((err) => {
        console.error('获取Token失败:', err);
      });
  }
});

注意：使用Firebase Messaging必须先请求用户的通知权限，否则getToken会失败。

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