错误：frame_id查询参数未定义

Question

我按照官方 Discord 文档开始我的第一个活动的说明进行操作，但它不起作用。 https://discord.com/developers/docs/activities/building-an-activity

当我将此代码添加到 main.js 文件时，页面为空白。当我仅使用 HTML 代码启动服务器时，它会显示 Hello World 和所有内容。在包含此代码的页面的开发人员模式的控制台中，我必须添加它在第 8 行时抛出错误消息。错误消息是“frame_id 查询参数未定义”。它必须与 SDK 有关，因为 DISCORD_CLIENT_ID 设置正确，我检查过。

这是我必须添加的代码：

// Import the SDK
import { DiscordSDK } from "@discord/embedded-app-sdk";

import "./style.css";
import rocketLogo from '/rocket.png';

// Instantiate the SDK
const discordSdk = new DiscordSDK(import.meta.env.VITE_DISCORD_CLIENT_ID);

setupDiscordSdk().then(() => {
  console.log("Discord SDK is ready");
});

async function setupDiscordSdk() {
  await discordSdk.ready();
}

document.querySelector('#app').innerHTML = `
  <div>
    <img src="${rocketLogo}" class="logo" alt="Discord" />
    <h1>Hello, World!</h1>
  </div>
`;

这是页面工作的代码：

import './style.css'
import rocketLogo from '/rocket.png'

document.querySelector('#app').innerHTML = `
  <div>
    <img src="${rocketLogo}" class="logo" alt="Discord" />
    <h1>Hello, World!</h1>
  </div>
`;

SDK 安装正确，所以这不应该是问题。并且应该正确导入。

我尝试了很多方法，例如将客户端 ID 直接粘贴到 newDiscordSDK 函数中，但这不起作用。我尝试进行故障排除，发现问题在第 8 行，但仍然没有客户端 ID，因此它与 Discord SDK 有关。然后我尝试再次安装Discord SDK。但这并没有起到任何作用。我还尝试继续处理来自 Discord 的文档，但它仍然显示一个空白页面。然后我尝试再次完成整个文档，但这也不起作用。

如有任何帮助，请接受:)

Answer 1

该指南指出，您应该真正使用 cloudflared 隧道，如果您不将其添加到开发人员门户中的 URL 映射中，该应用程序将显示为空白页面，因此将无法工作。我遇到了同样的问题，但现在我使用 cloudflared 隧道正确设置了它，它可以工作了:)