Interaction Failed (DiscordJS v13) - discord.js

Question

No error message, it just keep saying interaction failed
please help me which part is wrong
I want to make a rock,paper, scissor command.
So basically how this works, I click a button, and the bot will randomly pick another/same button.
and the winner will get 1 point. after some time, the winner is the one with most points
I have to put some stuff because "ur post is mostly code"
like I just want this thing to work man..
const { MessageActionRow, MessageButton, Discord } = require('discord.js');
const { MessageEmbed } = require('discord.js')
module.exports = new Command({
name: 'rps',
description: "play rock paper scissors",
permission: "ADMINISTRATOR",
async run(message, args, client) {
let botPick;
let botEmoji;
let botChoose;
let playerScore = 0;
let botScore = 0;
let rock = ":fist: Rock";
let paper = ":hand_splayed: Paper";
let scissor = ":v: Scissor";
const rockButton = new MessageButton().setCustomId("rock").setStyle('SECONDARY').setLabel("Rock");
const paperButton = new MessageButton().setCustomId("paper").setStyle('SECONDARY').setLabel("Paper");
const scissorButton = new MessageButton().setCustomId("scissor").setStyle('SECONDARY').setLabel("Scissor");
const row = new MessageActionRow().addComponents([rockButton, paperButton, scissorButton]);
let embed = new MessageEmbed()
.setColor("RANDOM")
.setDescription("Winner: **-**")
.addField(`Score RPS`, `\`->\` ${message.author}: **${playerScore} Point**\n\`->\` ${client.user}: **${botScore} Point**`)
message.channel.send({ embeds: [embed], components: [row] }).then((message) => {
const ifilter = i => i.user.id === message.author.id;
const collector = message.channel.createMessageComponentCollector({ filter: ifilter, time: 30000 })
collector.on("collect", async i => {
button.deferUpdate();
botPick = Math.floor(Math.random() * 3) + 1;
if (botPick === 1) {
botChoose = "rock";
}
if (botPick === 2) {
botChoose = "paper";
}
if (botPick === 3) {
botChoose = "scissor";
}
let embed1 = new MessageEmbed()
.setColor("RANDOM")
.setDescription('Winner: **-**')
.addField(`Score RPS`, `\`->\` ${message.author}: **${playerScore} Point**\n\`->\` ${client.user}: **${botScore} Point**`)
if (button.id === "rock") {
botPick = Math.floor(Math.random() * 3) + 1;
if (botChoose === "paper") {
botScore++;
let embed2 = new MessageEmbed()
.setColor("RANDOM")
.setDescription('Winner: **-**')
.addField(`Score RPS`, `\`->\` ${message.author}: **${playerScore} Point**\n\`->\` ${client.user}: **${botScore} Point**`)
return message.edit({ content: `I picked: **${paper}**\nYou picked: **${rock}**\n**Result**: You lost`, embeds: [embed2], components: [row] })
}
if (botChoose === "rock") {
return message.edit({ content: `I picked: **${rock}**\nYou picked: **${rock}**\n**Result**: We tied`, embeds: [embed1], components: [row] })
}
if (botChoose === "scissor") {
playerScore++;
let embed2 = new MessageEmbed()
.setColor("RANDOM")
.setDescription('Winner: **-**')
.addField(`Score RPS`, `\`->\` ${message.author}: **${playerScore} Point**\n\`->\` ${client.user}: **${botScore} Point**`)
return message.edit({ content: `I picked: **${scissor}**\nYou picked: **${rock}**\n**Result**: You Won`, embeds: [embed2], components: [row] })
}
}
if (button.id === "paper") {
botPick = Math.floor(Math.random() * 3) + 1;
if (botChoose === "scissor") {
botScore++;
let embed2 = new MessageEmbed()
.setColor("RANDOM")
.setDescription('Winner: **-**')
.addField(`Score RPS`, `\`->\` ${message.author}: **${playerScore} Point**\n\`->\` ${client.user}: **${botScore} Point**`)
return message.edit({ content: `I picked: **${scissor}**\nYou picked: **${paper}**\n**Result**: You lost`, embeds: [embed2], components: [row] })
}
if (botChoose === "paper") {
return message.edit({ content: `I picked: **${paper}**\nYou picked: **${paper}**\n**Result**: We tied`, embeds: [embed1], components: [row] })
}
if (botChoose === "rock") {
playerScore++;
let embed2 = new MessageEmbed()
.setColor("RANDOM")
.setDescription('Winner: **-**')
.addField(`Score RPS`, `\`->\` ${message.author}: **${playerScore} Point**\n\`->\` ${client.user}: **${botScore} Point**`)
return message.edit({ content: `I picked: **${rock}**\nYou picked: **${paper}**\n**Result**: You Won`, embeds: [embed2], components: [row] })
}
}
if (button.id === "scissor") {
botPick = Math.floor(Math.random() * 3) + 1;
if (botChoose === "rock") {
botScore++;
let embed2 = new MessageEmbed()
.setColor("RANDOM")
.setDescription('Winner: **-**')
.addField(`Score RPS`, `\`->\` ${message.author}: **${playerScore} Point**\n\`->\` ${client.user}: **${botScore} Point**`)
return message.edit({ content: `I picked: **${rock}**\nYou picked: **${scissor}**\n**Result**: You lost`, embeds: [embed2], components: [row] })
}
if (botChoose === "scissor") {
return message.edit({ content: `I picked: **${scissor}**\nYou picked: **${scissor}**\n**Result**: We tied`, embeds: [embed1], components: [row] })
}
if (botChoose === "paper") {
playerScore++;
let embed2 = new MessageEmbed()
.setColor("RANDOM")
.setDescription('Winner: **-**')
.addField(`Score RPS`, `\`->\` ${message.author}: **${playerScore} Point**\n\`->\` ${client.user}: **${botScore} Point**`)
return message.edit({ content: `I picked: **${paper}**\nYou picked: **${scissor}**\n**Result**: You Won`, embeds: [embed2], components: [row] })
}
}
collector.on("end", async(x) => {
if (x.size === 0) {
message.edit(`No one even played againts me lol!`, null);
} else if (x.size > 0) {
if (playerScore === botScore) {
let embed2 = new MessageEmbed()
.setColor("BLACK")
.setDescription('Winner: **TIED**')
.addField(`Score RPS`, `\`->\` ${message.author}: **${playerScore} Point**\n\`->\` ${client.user}: **${botScore} Point**`)
message.edit({ content: [null], embeds: [embed2], components: [null] })
} else if (playerScore > botScore) {
let embed2 = new MessageEmbed()
.setColor("GREEN")
.setDescription(`Winner: **${message.author}**`)
.addField(`Score RPS`, `\`->\` ${message.author}: **${playerScore} Point**\n\`->\` ${client.user}: **${botScore} Point**`)
message.edit({ content: [null], embeds: [embed2], components: [null] })
} else if (playerScore < botScore) {
let embed2 = new MessageEmbed()
.setColor("RED")
.setDescription(`Winner: **${client.user}**`)
.addField(`Score RPS`, `\`->\` ${message.author}: **${playerScore} Point**\n\`->\` ${client.user}: **${botScore} Point**`)
message.edit({ content: [null], embeds: [embed2], components: [null] })
}
}
})
})
})
}
});```

Answer 1

In your collector.on("collect", ...)'s callback, you take a parameter i, but use button.deferUpdate() in the body of the function. button is not defined, result in an error, and the interaction times out.
In addition, your message.channel.send(...).then(message) overwrites the original message variable, so your filter is actually looking for interactions from the bot itself.
To fix this, remove the unnecessary variable message from the .then():
message.channel.send({ embeds: [embed], components: [row] }).then(() => {
// ...
Also, change the parameter's name from i to button:
collector.on("collect", async button => {
button.deferUpdate();
// ...
}
Another issue is that collector.on("end") is called within collector.on("collect"). This may be unintended, and you may want to move that outside of the collector.on("collect") callback function.

Answer 2

Note that you cecked the wrong value of the button id
use button.customId instead of button.id this is not a correct to check the id.
Also on your collector there is so many resource embed create , practicaly this is a bad idea considering using one function to handle that win and lose :)
for making collector recognized what the component you been using you need to declare the type of components.
Like this.
const collector = message.createMessageComponentCollector({
filter: ifilter,
componenType: "BUTTON",
time: 30000
})
Its seem your collector did not recognized your component.