Cannot send ActionRowBuilder due to type error in djs 14 | discord.js - imagine an app | Page 1

strong pulsar Jul 3, 2023, 5:28 PM

#

I'm trying to send a button component with a message but i get the following errors:
Type 'ActionRowBuilder<AnyComponentBuilder>' is not assignable to type 'APIActionRowComponent<APIMessageActionRowComponent> | JSONEncodable<APIActionRowComponent<APIMessageActionRowComponent>> | ActionRowData<...>'.

Property 'type' is missing in type 'ActionRowBuilder<AnyComponentBuilder>' but required in type 'ActionRowData<MessageActionRowComponentBuilder | MessageActionRowComponentData>'.

const button = new ButtonBuilder()
    .setCustomId("qac_sr")
    .setLabel("Request")
    .setStyle(ButtonStyle.Success);

    const row = new ActionRowBuilder()
    .addComponents(button)

    client.guilds.fetch("id").then((guild) => {
        (guild.channels.fetch("id") as Promise<TextChannel>).then((channel) => {
            channel.send({
                content: "Click the button below to request a test",
                components: [row] // Errors here
            })
        })
    })

wicked moonBOT Jul 3, 2023, 5:29 PM

#

In TypeScript the ActionRowBuilder class has a generic type parameter that specifies the type of component the action row holds:

const row = new ActionRowBuilder<ButtonBuilder>().addComponents(button)
const row = new ActionRowBuilder<StringSelectMenuBuilder>().addComponents(selectMenu)
const row = new ActionRowBuilder<TextInputBuilder>().addComponents(textInput)

exotic mirage Jul 3, 2023, 5:29 PM

#

#986520997006032896 would’ve been a better fit for this question, but it’s alright

strong pulsar Jul 3, 2023, 5:30 PM

#

exotic mirage <#986520997006032896> would’ve been a better fit for this question, but it’s alr...

i thought it was for js only

#

anyway it worked thanks

exotic mirage Jul 3, 2023, 5:31 PM

#

yeah it’s for both ts and js there, but i’m glad it’s fixed

wispy sandal Jul 7, 2023, 9:24 PM

#

const row = new ActionRowBuilder<ButtonBuilder>()
.addComponents(confirm);

mine is specified but it still returns

In TypeScript the ActionRowBuilder class has a generic type parameter that specifies the type of component the action row holds:
const row = new ActionRowBuilder<ButtonBuilder>().addComponents(button)
const row = new ActionRowBuilder<StringSelectMenuBuilder>().addComponents(selectMenu)
const row = new ActionRowBuilder<TextInputBuilder>().addComponents(textInput)

plucky crystal Jul 7, 2023, 9:37 PM

#

wispy sandal const row = new ActionRowBuilder<ButtonBuilder>() .addComponents(confirm...

Are you getting any errors ?
And is that confirm variable an instance of the ButtonBuilder class ?

wispy sandal Jul 7, 2023, 9:39 PM

#

in the editor it all looks fine, when i run the slash command it all works fine no errors but as soon as i try to remove it by setting it to [] it gives me the above error

exotic mirage Jul 7, 2023, 9:40 PM

#

can you show the error you get from your console

wispy sandal Jul 7, 2023, 9:40 PM

#

.setCustomId('confirm')
        .setLabel('Complete (Make sure auth. is saved in app)')
        .setStyle(ButtonStyle.Primary);

      const row = new ActionRowBuilder<ButtonBuilder>()
        .addComponents(confirm);

      const embed = new EmbedBuilder()
        .setColor(0x0099FF)
        .setTitle('Scan qr with Google Authenticator')
        .setImage(attachmentUrl)
        .setFooter({ text: 'Risk Mitigation unit - [RU] Mangement', iconURL: 'link.png' });

      const inmess = await msgInt?.reply({
        content: '',
        ephemeral: true,
        components: [row],
        embeds: [embed],
        files: [attachment],
      });
    } catch (error) {
      console.log('Error with QR:', error);
    }

    const collector = channel?.createMessageComponentCollector({
      max: 1,
      componentType: ComponentType.Button,
      time: 1000 * 5 * 60,
    });
    collector?.on('collect', async (collected: Collection<string, ButtonInteraction>) => {
      if (collected.first()?.customId === 'confirm') {
        await msgInt?.editReply({
          content: 'Sucesfully configured 2fa',
          components: [],
          embeds: [],
          files: [],
        })
      }
    });
  },
} as CommandObject;

#

code ^

#

error

exotic mirage Jul 7, 2023, 9:42 PM

#

the collect event in your code doesn't return a collection so im not too sure why you set it to one

#

collected would return a ButtonInteraction, which you can access .customId from

#

but regarding that error, make sure your files are saved

wispy sandal Jul 7, 2023, 9:43 PM

#

honestly just straight up copied the collection from wok documentation, ill change that

#

seemed fine

exotic mirage Jul 7, 2023, 9:44 PM

#

im sure it works fine, but it's really not needed

also could be TS not recognizing the type after placing it for that row. try restarting your TS server & your IDe

wispy sandal Jul 7, 2023, 9:44 PM

#

interaction is now failing no errors

wispy sandal Jul 7, 2023, 9:44 PM

#

exotic mirage im sure it works fine, but it's really not needed also could be TS not recogniz...

will do

exotic mirage Jul 7, 2023, 9:45 PM

#

i would also suggest making the collector on the message instead of the channel

wispy sandal Jul 7, 2023, 9:45 PM

#

on msgInt?

plucky crystal Jul 7, 2023, 9:46 PM

#

I'm also seeing an editReply after a reply.
Which won't work because you've already replied to the interaction.
You can either reply to the button interaction or do an update.
Or a followUp on your main message

exotic mirage Jul 7, 2023, 9:46 PM

#

wot

#

you can call editReply after a reply

wispy sandal Jul 7, 2023, 9:46 PM

#

im editing a reply?

#

i dont want to send a new message

plucky crystal Jul 7, 2023, 9:47 PM

#

eh.... I thought it was meant to be used in deferred responses. mb then

exotic mirage Jul 7, 2023, 9:47 PM

#

editReply is exactly what it sounds like. edits the inital reply

wispy sandal Jul 7, 2023, 9:48 PM

#

wispy sandal on msgInt?

? cuz thats innitial command message andd i cant use inmess

plucky crystal Jul 7, 2023, 9:48 PM

#

Makes sense. Thanks for the correction.

plucky crystal Jul 7, 2023, 9:48 PM

#

wispy sandal on msgInt?

You can create a collector on the message you send yes.
Rather than scoping the entire channel where the message is being sent

wispy sandal Jul 7, 2023, 9:49 PM

#

it shows: Property 'createMessageComponentCollector' does not exist on type

exotic mirage Jul 7, 2023, 9:49 PM

#

on type what

wispy sandal Jul 7, 2023, 9:49 PM

#

Property 'createMessageComponentCollector' does not exist on type 'ChatInputCommandInteraction<CacheType>'

#

thats what i said before

exotic mirage Jul 7, 2023, 9:49 PM

#

well yes because its not a message

wispy sandal Jul 7, 2023, 9:49 PM

#

i cant use msgint

#

nor inmess

wispy sandal Jul 7, 2023, 9:50 PM

#

exotic mirage well yes because its not a message

yes i know i was responding to the you can...yes.

exotic mirage Jul 7, 2023, 9:50 PM

#

please show your entire code

wispy sandal Jul 7, 2023, 9:50 PM

#

how would i make the collector on the msg instead of channel

exotic mirage Jul 7, 2023, 9:50 PM

#

should really be in #986520997006032896 since this isn't the best channel, but this time its fine

wispy sandal Jul 7, 2023, 9:51 PM

#

const user = '[RU] Authorization';
const service = '[RU] | Russian Federation';

export default {
  description: "generates TOTP TOKEN - ONE TIME USE",
  type: CommandType.SLASH,
  testOnly: true,
  callback: async ({ interaction: msgInt, channel }) => {
    const userId = msgInt?.user?.id;
    console.log(userId)
    const secret = userId ? userId + "" : '';
    const otpauth = authenticator.keyuri(user, service, secret);

    try {
      const imageDataUrl = await qrcode.toDataURL(otpauth);
      const buffer = Buffer.from(imageDataUrl.split(',')[1], 'base64');
      const attachment = new AttachmentBuilder(buffer, { name: 'qrcode.png' });
      const attachmentUrl = `attachment://${attachment.name}`;

      const confirm = new ButtonBuilder()
        .setCustomId('confirm')
        .setLabel('Complete (Make sure auth. is saved in app)')
        .setStyle(ButtonStyle.Primary);

      const row = new ActionRowBuilder<ButtonBuilder>()
        .addComponents(confirm);

      const embed = new EmbedBuilder()
        .setColor(0x0099FF)
        .setTitle('Scan qr with Google Authenticator')
        .setImage(attachmentUrl)
        .setFooter({ text: 'Risk Mitigation unit - [RU] Mangement', iconURL: ' });

      const inmess = await msgInt?.reply({
        content: '',
        ephemeral: true,
        components: [row],
        embeds: [embed],
        files: [attachment],
      });
    } catch (error) {
      console.log('Error with QR:', error);
    }

    const collector = msgInt?.createMessageComponentCollector({
      max: 1,
      componentType: ComponentType.Button,
      time: 1000 * 5 * 60,
    });
    collector?.on('collected', async (collected: Collection<string, ButtonInteraction>) => {
      if (collected.first()?.customId === 'confirm') {
        await msgInt?.editReply({
          content: 'Sucesfully configured 2fa',
          components: [],
          embeds: [],
          files: [],
        })
      }
    });
  },
} as CommandObject;```

exotic mirage Jul 7, 2023, 9:51 PM

#

add fetchReply: true inside the options for inmess and i would move the catch statement lower in your code

#

then you can call inmess.createMessageComponentCollector(...

wispy sandal Jul 7, 2023, 9:52 PM

#

exotic mirage add `fetchReply: true` inside the options for `inmess` and i would move the catc...

fetch is for the qr

#

exotic mirage Jul 7, 2023, 9:53 PM

#

i would move the catch statement lower in your code

wispy sandal Jul 7, 2023, 9:53 PM

#

oops

exotic mirage Jul 7, 2023, 9:53 PM

#

because inmess is inside the try...catch so it's not in the correct scope

wispy sandal Jul 7, 2023, 9:53 PM

#

testing rn..

#

no error

exotic mirage Jul 7, 2023, 9:55 PM

#

in that case i would do collected.update, but since you set it to a collection, you need to access a collection value first

or... use ButtonInteraction instead

wicked moonBOT Jul 7, 2023, 9:55 PM

#

method ButtonInteraction#update()
Updates the original message of the component on which the interaction was received on.

wispy sandal Jul 7, 2023, 9:57 PM

#

exotic mirage Jul 7, 2023, 9:57 PM

#

?

wispy sandal Jul 7, 2023, 9:57 PM

#

collector does not respond at all?

#

i put in a console.log

#

and when i press btn nothing gets outputted

exotic mirage Jul 7, 2023, 9:58 PM

#

the event is collect, not collected

#

before i was referring to your collected callback param

wispy sandal Jul 7, 2023, 10:00 PM

#

exotic mirage Jul 7, 2023, 10:00 PM

#

wispy sandal Jul 7, 2023, 10:00 PM

#

how do i refer to collection

#

huh

exotic mirage Jul 7, 2023, 10:00 PM

#

please look at your code to see what you named your variables

wispy sandal Jul 7, 2023, 10:00 PM

#

magically changed lol

exotic mirage Jul 7, 2023, 10:00 PM

#

its collected, not collection

wispy sandal Jul 7, 2023, 10:00 PM

#

sorry

exotic mirage Jul 7, 2023, 10:01 PM

#

it's alright, just be aware of the names

#

to make it easier, you could call the callback param button as an example

wispy sandal Jul 7, 2023, 10:01 PM

#

i cant use collected.first now

#

so how do i check for the buttonid

exotic mirage Jul 7, 2023, 10:02 PM

#

im still not sure why you set it to a Collection anyway

wispy sandal Jul 7, 2023, 10:02 PM

#

no i mean i used .first() before

#

but i cant do that if i change to collect

exotic mirage Jul 7, 2023, 10:03 PM

#

change what exactly?

wispy sandal Jul 7, 2023, 10:03 PM

#

how do i check if custom id == 'confirm'

exotic mirage Jul 7, 2023, 10:03 PM

#

you're doing that already

wispy sandal Jul 7, 2023, 10:03 PM

#

exotic mirage the event is `collect`, not `collected`

.

wispy sandal Jul 7, 2023, 10:03 PM

#

exotic mirage you're doing that already

i cant

#

TypeError: collected.first is not a function
at C:\Users\sisar\Desktop\RiskMittigation\commands\setup.ts:55:21

exotic mirage Jul 7, 2023, 10:04 PM

#

collect is the collector event name
collector is the name of your InteractionCollector
collected is the param for your InteractionCollector in the collect event

#

still not sure why you make it a collection since a InteractionCollector does not return that in the collect event

wispy sandal Jul 7, 2023, 10:06 PM

#

exotic mirage still not sure why you make it a collection since a InteractionCollector does n...

thats what they did in WOK docs and it seemed to work

wispy sandal Jul 7, 2023, 10:06 PM

#

wispy sandal TypeError: collected.first is not a function at C:\Users\sisar\Desktop\RiskM...

what should i do about this?

exotic mirage Jul 7, 2023, 10:06 PM

#

change the collected type to ButtonInteraction

#

and then collected.customId

exotic mirage Jul 7, 2023, 10:06 PM

#

wispy sandal thats what they did in WOK docs and it seemed to work

that doesn't mean it's correct

wispy sandal Jul 7, 2023, 10:07 PM

#

i mean they wrote the handler

#

but it indeed wasnt

wispy sandal Jul 7, 2023, 10:07 PM

#

exotic mirage change the `collected` type to `ButtonInteraction`

it already is?

exotic mirage Jul 7, 2023, 10:07 PM

#

it's a collection with a ButtonInteraction as the value

#

so it's not only a ButtonInteraction

wispy sandal Jul 7, 2023, 10:08 PM

#

exotic mirage Jul 7, 2023, 10:08 PM

#

you dont seem to understand what im saying

wispy sandal Jul 7, 2023, 10:09 PM

#

my brain isnt working its late what do i do diffrent

#

yes im sorry ive been debugging this stupid program for the past 3 hours

exotic mirage Jul 7, 2023, 10:09 PM

#

collector?.on('collect', async (collected: ButtonInteraction) => {

#

and then collected.customId

wispy sandal Jul 7, 2023, 10:10 PM

#

omg

#

thank you so much!!!!!!

#

YES

#

FINALLY

#

OMG

#

how can i thank you

exotic mirage Jul 7, 2023, 10:11 PM

#

the discord.js guide has great sections for making your own event & command handler if you don't want to rely on what a separate package does since it may not all be 100% correct, but this is just my suggestion

#

im so glad its working!

wispy sandal Jul 7, 2023, 10:11 PM

#

thank you so much!!

#

i really apreciate you sticking around for so long!!

#

im gonna go to sleep now

#Cannot send ActionRowBuilder due to type error in djs 14