在Bubble.io中运行JavaScript导入失败，Firebase getToken未定义求助

针对你遇到的导入错误、函数未定义等问题，直接给你可落地的解决方法：

1. 优先用Firebase兼容版CDN（全局挂载，无需import） #

Bubble的HTML元素默认是普通脚本环境，不支持ES模块的import语法，改用Firebase的compat兼容版本，它会把API挂载到全局firebase对象上，直接调用即可：

<!-- 按顺序引入Firebase兼容版CDN -->
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js"></script>

<script>
  // 初始化Firebase（替换成你的项目配置）
  const firebaseConfig = {
    apiKey: "你的API_KEY",
    authDomain: "你的AUTH_DOMAIN",
    projectId: "你的PROJECT_ID",
    storageBucket: "你的STORAGE_BUCKET",
    messagingSenderId: "你的SENDER_ID",
    appId: "你的APP_ID"
  };
  firebase.initializeApp(firebaseConfig);

  // 调用getToken获取推送令牌
  const messaging = firebase.messaging();
  messaging.getToken({ vapidKey: "你的VAPID密钥" })
    .then(token => {
      console.log("推送令牌：", token);
      // 这里可以把token传给Bubble的元素或后端
    })
    .catch(err => {
      console.error("获取令牌失败：", err);
    });
</script>

注意：VAPID密钥需要在Firebase控制台的「云消息传递」→「Web配置」中生成。

2. 若坚持用Webpack打包，调整输出配置 #

如果已经用Webpack打包了Firebase代码，要确保打包后的脚本能在全局环境中被访问，修改webpack.config.js：

const path = require('path');

module.exports = {
  entry: './src/你的推送脚本入口.js',
  output: {
    filename: 'firebase-messaging-bundle.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'FirebasePush', // 全局变量名，Bubble中直接调用这个变量
    libraryTarget: 'umd', // 兼容全局、AMD等环境
    globalObject: 'this' // 适配浏览器环境的全局对象
  }
};

打包后把firebase-messaging-bundle.js上传到Bubble的文件库，然后在HTML元素中引入：

<script src="你的Bubble文件库中脚本的URL"></script>
<script>
  // 直接调用全局对象中的方法
  FirebasePush.initFirebase().then(token => {
    console.log(token);
  });
</script>

3. 解决ES模块导入的环境问题 #

如果一定要用ES模块的import语法，给脚本加上type="module"属性，同时用Firebase的ES模块CDN：

<script type="module">
  import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js';
  import { getMessaging, getToken } from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging.js';

  const app = initializeApp({
    // 你的Firebase配置
  });
  const messaging = getMessaging(app);
  
  getToken(messaging, { vapidKey: "你的VAPID密钥" })
    .then(token => console.log(token));
</script>

注意：这种方式需要检查Bubble的内容安全策略（CSP）是否允许加载这些CDN链接，若报错，需在Bubble后台「设置」→「SEO/元数据」中调整CSP的script-src规则，添加https://www.gstatic.com。

关键排查点 #

• 必须用HTTPS环境测试（localhost除外），getToken仅在安全环境下生效。
• 确保Firebase项目已启用云消息传递，且Web应用的推送配置正确。
• 避免混用ES模块和全局脚本，选一种方式保持一致。

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