ERROR: frame_id query param is not defined

Question

I followed the Instructions of the official Discord Documantation Getting started with my First Activity but it doesnt work. https://discord.com/developers/docs/activities/building-an-activity

When I add this code to the main.js file the Page is blank. When I start the server with just the HTML code it shows the Hello World and everything. In the console of the Developer mode of the page with this code I have to add it throws the error message when it comes to line 8. The error Message is "frame_id query param is not defined". It has to have something to do with the SDK because the DISCORD_CLIENT_ID is set correctly I checked that.

This is the code I have to Add:

// 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>
`;

This is the code where the page works:

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>
`;

The SDK is installed correctly so this shoud not be the Problem. And it shoud be Imported correctly.

I tried many things like pasting the Client Id directly into the newDiscordSDK Function but this didn't work. I tried to truble shoot and found out that the Problem in in Line 8 but still nocht the Client Id so it has to do with the Discord SDK. Then I tried to install the Discord SDK again. But this didn't do anything to. I also tryed to move on with the Documentation from Discord it still showed a blank Page. Then I tried to do the whole Documentation again this also didn't work.

Any help is appriciated :)

Answer 1

The guide states that you should REALLY use the cloudflared tunnel, it you do not add it to your URL mappings in the developer portal, the app is displayed as a blank page, and therefore will not work. I had the same problem, but now that I set it up correctly with the cloudflared tunnel, it works :)