discord.js - Imagine a boo! 👻•8mo ago

Property 'id' does not exist on type 'APIGuild'.

via Discord-Api-Types package, latest, I am receiving the type error: Type error: Property 'id' does not exist on type 'APIGuild'. But according to documentation, this should not be the case. I have no idea how to fix this, I have tried; restarting typescript server, restarting PC, reinstalling packages, and a myriad of other common fixes. What on earth is happening?

7 Replies

d.js toolkit•8mo ago

- What's your exact discord.js npm list discord.js and node node -v version? - Not a discord.js issue? Check out #other-js-ts. - Consider reading #how-to-get-help to improve your question! - Explain what exactly your issue is. - Post the full error stack trace, not just the top part! - Show your code! - Issue solved? Press the button!

Zeke•8mo ago

PS D:\rl-app> npm list
[email protected] D:\rl-app
├── @auth/[email protected]
├── @headlessui/[email protected]
├── @headlessui/[email protected]
├── @heroicons/[email protected]
├── @prisma/[email protected]
├── @prisma/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @vercel/[email protected]
├── @vercel/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

PS D:\rl-app> npm list
[email protected] D:\rl-app
├── @auth/[email protected]
├── @headlessui/[email protected]
├── @headlessui/[email protected]
├── @heroicons/[email protected]
├── @prisma/[email protected]
├── @prisma/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @vercel/[email protected]
├── @vercel/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

PS D:\rl-app> node -v
v21.6.1

PS D:\rl-app> node -v
v21.6.1

My vercel output where the error occurs:

Type error: Property 'id' does not exist on type 'APIGuild'.
  20 |         <>
  21 |             {guild.icon ? (
> 22 |                 <Image src={`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`} alt={`${guild.name} Icon`} className='h-16 w-16 rounded' width={100} height={100} />
     |                                                                       ^
  23 |             ) : (
  24 |                 <span className='h-16 w-16 flex items-center justify-center'>{guild.name.charAt(0)}</span>
  25 |             )
Error: Command "npm run build" exited with 1

Type error: Property 'id' does not exist on type 'APIGuild'.
  20 |         <>
  21 |             {guild.icon ? (
> 22 |                 <Image src={`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`} alt={`${guild.name} Icon`} className='h-16 w-16 rounded' width={100} height={100} />
     |                                                                       ^
  23 |             ) : (
  24 |                 <span className='h-16 w-16 flex items-center justify-center'>{guild.name.charAt(0)}</span>
  25 |             )
Error: Command "npm run build" exited with 1

The relevant code:

import { auth } from "@/auth";
import { getGuild } from "@/lib/guilds";
import { PlusIcon, ExclamationTriangleIcon } from "@heroicons/react/24/outline";
import { APIGuild } from "discord-api-types/v10";
import { Options } from "../_components/Options";
import db from "@/lib/db";
import { GroupBasicResponse, GroupMembershipResponse } from "roblox-api-types";
import Block from "@/app/_components/Block";
import Image from "next/image";

export const runtime = "edge";

export default async function Page({ params }: { params: { id: string } }) {
    const session = await auth();

    const guildRes: { status: string; guild: APIGuild | null } = await getGuild(params.id);
    const guild = guildRes.guild;

    const guildContent = guild ? (
        <>
            {guild.icon ? (
                <Image src={`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`} alt={`${guild.name} Icon`} className='h-16 w-16 rounded' width={100} height={100} />
            ) : (
                <span className='h-16 w-16 flex items-center justify-center'>{guild.name.charAt(0)}</span>
            )
            }
            <span className='text-lg'>{guild.name}</span>
        </>
    ) : (
        <>
            <span className='h-16 w-16 flex items-center text-4xl justify-center'>N</span>
            <span className='text-lg'>Not Found</span>
        </>
    );

import { auth } from "@/auth";
import { getGuild } from "@/lib/guilds";
import { PlusIcon, ExclamationTriangleIcon } from "@heroicons/react/24/outline";
import { APIGuild } from "discord-api-types/v10";
import { Options } from "../_components/Options";
import db from "@/lib/db";
import { GroupBasicResponse, GroupMembershipResponse } from "roblox-api-types";
import Block from "@/app/_components/Block";
import Image from "next/image";

export const runtime = "edge";

export default async function Page({ params }: { params: { id: string } }) {
    const session = await auth();

    const guildRes: { status: string; guild: APIGuild | null } = await getGuild(params.id);
    const guild = guildRes.guild;

    const guildContent = guild ? (
        <>
            {guild.icon ? (
                <Image src={`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`} alt={`${guild.name} Icon`} className='h-16 w-16 rounded' width={100} height={100} />
            ) : (
                <span className='h-16 w-16 flex items-center justify-center'>{guild.name.charAt(0)}</span>
            )
            }
            <span className='text-lg'>{guild.name}</span>
        </>
    ) : (
        <>
            <span className='h-16 w-16 flex items-center text-4xl justify-center'>N</span>
            <span className='text-lg'>Not Found</span>
        </>
    );

kin.ts•8mo ago

probably because guildRes.guild possibly null..

Zeke•8mo ago

The jsx where guild.id is used is wrapped in a guild not null condition.

chewie•8mo ago

show the getGuild function

Zeke•8mo ago

I’m on mobile, but The get guild function fetch request discord api for v10 guild, inline with what discord api types APIGuild should be Or, null, since it might not exist

enum GuildAuthStatus {
    NotFound = 'Not Found',
    Unauthorized = 'Unauthorized',
    Authorized = 'Authorized',
}

export async function getGuild(guildId: string) {
    const session = await auth();

    const botGuildRes = await fetch(`https://discord.com/api/v10/guilds/${guildId}`, {
        headers: {
            Authorization: 'Bot ' + process.env.DISCORD_BOT_TOKEN,
        },
        next: { revalidate: 4 }
    });

    if (!botGuildRes.ok) {
        const userGuild = await getUserGuild(guildId, session?.user.access_token)
        delGuildDoc(guildId)

        if (!userGuild || !userGuild.owner) {
            return { status: GuildAuthStatus.Unauthorized, guild: userGuild }
        }

        return { status: GuildAuthStatus.NotFound, guild: userGuild };
    };

    const botGuild: APIGuild = await botGuildRes.json();
    setupGuildDoc(botGuild);

    if (botGuild.owner_id !== session?.user.id) {
        return { status: GuildAuthStatus.Unauthorized, guild: botGuild };
    };

    return { status: GuildAuthStatus.Authorized, guild: botGuild };
};

enum GuildAuthStatus {
    NotFound = 'Not Found',
    Unauthorized = 'Unauthorized',
    Authorized = 'Authorized',
}

export async function getGuild(guildId: string) {
    const session = await auth();

    const botGuildRes = await fetch(`https://discord.com/api/v10/guilds/${guildId}`, {
        headers: {
            Authorization: 'Bot ' + process.env.DISCORD_BOT_TOKEN,
        },
        next: { revalidate: 4 }
    });

    if (!botGuildRes.ok) {
        const userGuild = await getUserGuild(guildId, session?.user.access_token)
        delGuildDoc(guildId)

        if (!userGuild || !userGuild.owner) {
            return { status: GuildAuthStatus.Unauthorized, guild: userGuild }
        }

        return { status: GuildAuthStatus.NotFound, guild: userGuild };
    };

    const botGuild: APIGuild = await botGuildRes.json();
    setupGuildDoc(botGuild);

    if (botGuild.owner_id !== session?.user.id) {
        return { status: GuildAuthStatus.Unauthorized, guild: botGuild };
    };

    return { status: GuildAuthStatus.Authorized, guild: botGuild };
};

Is there no solution lol?

vladdy•8mo ago

Can you setup a minimum repro sample please? 🙏 Also try bumping -types too and let us know if it still happens

Gaming

Programming

Property 'id' does not exist on type 'APIGuild'.