How to Fix Stuck Ready Event in Discord Embedded App SDK
Tags: javascript, programming, discord, node
Published: 2024-05-27 22:00:00

If you've been following Discord's **[Building Your First Activity](https://discord.com/developers/docs/activities/building-an-activity)** tutorial, you may have encountered an issue where the **[Embedded App SDK](https://github.com/discord/embedded-app-sdk)** gets stuck on the `READY` event. This issue can be caused by a few different things, but the most common cause is **[Vite's](https://vitejs.dev/)** hot module reloading **[(HMR)](https://vitejs.dev/guide/api-hmr.html)** feature.

We've seen **[this issue](https://github.com/discord/embedded-app-sdk/issues/41)** pop up in a **[few different places](https://discord.com/channels/613425648685547541/1219458343513358356)**, so we wanted to provide a quick guide on how to fix it. This post will explain it in more detail and suggest ways around it.

## TLDR; Quick Fix

If you're in a hurry, the quickest way to fix this without disabling HMR is to make sure you're creating only one instance of the `DiscordSDK` close to the root of your app. Check out **[this template](https://github.com/Wave-Play/robo.js/tree/main/templates/starter-app-js-react)** to see how it's done.

You can also create a new **Discord Activity** project with the fix already included by running this in your terminal:

```bash
npx create-robo <projectName> -k activity
```

## What's Happening?

When you're developing a **Discord Activity** with **Vite**, the hot module reloading feature can cause the SDK to be re-created multiple times. This is because **Vite** reloads the module when you make changes, which can cause the `DiscordSDK` to be reinitialized. 

Unfortunately, `discordSdk.ready()` gets stuck on the `READY` event because **[Discord sends the payload once per instance](https://github.com/discord/embedded-app-sdk/issues/41#issuecomment-2062926815)**. That means your activity will be left waiting for the `READY` event to fire, but it never will until you restart it.

## Starting Fresh with a Fix

To fix this issue, you need to ensure that you're only creating one instance of the `DiscordSDK` close to the root of your app. This way, the SDK won't be re-initialized every time you make changes, thus you won't need to `await discordSdk.ready()` more than once.

The easiest and fastest way to prevent this is to make sure you start from a template that already has this fix in place. You can **[clone this template]()** or create a new project with the fix included by running:

```bash
npx create-robo <projectName> -k activity
```

This will create a new **Discord Activity** project with the fix already in place, so you won't have to worry about this issue. Check out our guide for more info!

➞ [✨ **Guide:** Creating a Discord Activity in seconds with Robo.js](https://dev.to/waveplay/how-to-build-a-discord-activity-easily-with-robojs-5bng)

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dtw3dql9wofx0coon46.png)

## Fixing Your Existing Project

If you're already working on a project and don't want to start over, you can fix this issue by ensuring that you're only creating one instance of the `DiscordSDK` close to the root of your app. For example, in a **[React](https://react.dev)** app, you can use a **[Context](https://react.dev/docs/context)** to manage the SDK instance.

Here's a simplified example:

```jsx
import { DiscordSDK, DiscordSDKMock } from '@discord/embedded-app-sdk'
import { createContext, useContext } from 'react'

export const discordSdk = new DiscordSDK(import.meta.env.VITE_DISCORD_CLIENT_ID)

const DiscordContext = createContext({ discordSdk })

export function DiscordContextProvider(props) {
	const { children } = props
	const setupResult = useDiscordSdkSetup()

	return <DiscordContext.Provider value={setupResult}>{children}</DiscordContext.Provider>
}

export function useDiscordSdk() {
	return useContext(DiscordContext)
}

function useDiscordSdkSetup() {
	// Your setup logic here (e.g., discordSdk.ready() in a useEffect)

	return { discordSdk }
}
```

Then apply the `DiscordContextProvider` at the root of your app:

```jsx
import { DiscordContextProvider } from '../hooks/useDiscordSdk'
import { Activity } from './Activity'
import './App.css'

export default function App() {
	return (
		<DiscordContextProvider>
			<Activity />
		</DiscordContextProvider>
	)
}
```

This way, **Vite** won't re-initialize the `DiscordSDK` every time you make changes, and you won't get stuck on the `READY` event. It works like so:

1. The `DiscordSDK` is created once and passed down through the context.
2. The SDK is initialized in the context provider.
3. Components can access the SDK through the custom `useDiscordSdk` hook.
4. The same SDK instance will be re-used, as long as you don't edit the `useDiscordSdk` file.

## Conclusion

React's **[Context](https://react.dev/docs/context)** is a great way to manage global state in your app, and it's perfect for managing the `DiscordSDK` instance. By ensuring that you only create one instance of the SDK close to the root of your app, you can prevent the `READY` event from getting stuck and avoid the need to restart your activity every time you make changes.

We highly recommend using `create-robo` to create a **Discord Activity** project. These templates are designed to help you get started quickly and avoid common issues like this one. What's more, they come with a lot of other features and tools to help you build your activity faster and more efficiently, such as **[Multiplayer Support](https://dev.to/waveplay/how-to-add-multiplayer-to-your-discord-activity-lo1)**, **[TypeScript](https://docs.roboplay.dev/robojs/typescript)**, **[Easy Hosting](https://docs.roboplay.dev/discord-activities/hosting)**, **[Streamlined Tunnels](https://docs.roboplay.dev/discord-activities/tunnels)**, **[Built-in Database](https://docs.roboplay.dev/robojs/flashcore)**, **[Plugin System](https://docs.roboplay.dev/plugins/overview)**, and so much more!

Don't forget to **[join our Discord server](https://roboplay.dev/discord)** to chat with other developers, ask questions, and share your projects. We're here to help you build amazing apps with **Robo.js**! 🚀

➞ [🚀 **Community:** Join our Discord Server](https://roboplay.dev/discord)

Our very own Robo, **Sage**, is there to answer any questions about Robo.js, Discord.js, and more