Interaction has already been acknowledged when using a different button - discord.js

Question

I am getting the interaction has already been acknowledged error. Basically when the command is called the first time, the button and the modal work just fine. The second time, the button appears but then shows the modal and throws the "DiscordAPIError: Interaction has already been acknowledged." error. I am in a real slump.
} else if (order == "edit") {
let shelfNameSpaces = "";
for (let i = 1; i < args.length; i++) {
shelfNameSpaces += args[i] + " ";
}
let shelfName = shelfNameSpaces.trim();
let shelfObj = await Shelves.findOne({name: shelfName})
if (shelfObj) {
const embed = new MessageEmbed()
.setColor("#0099ff")
.setThumbnail(profileImage)
.setTitle(`${shelfObj["name"]}`)
.setDescription("Displaying shelf info")
.addField("Owner", `<#${shelfObj["owner"]}>`)
if (shelfObj["info"].length <= 0) {
embed.addField("Info", "No information added")
} else {
embed.addField("Info", shelfObj["info"])
}
let m = await message.channel.send({ embeds: [embed] })
const row = new MessageActionRow();
row.addComponents(
new MessageButton()
.setCustomId(`edit-shelf`)
.setLabel('Edit Shelf')
.setStyle("PRIMARY")
)
var buttons = await message.channel.send({ components: [row] })
setTimeout(() => {
if (buttons.deletable)
buttons.delete()
}, 60000);
// client.on("interactionCreate", async (interaction) => {
// module.exports = {
// name: 'interactionCreate',
// async execute (interaction) {
// }
// }
var editInfo, modal, editRow;
client.on("interactionCreate", async (interaction) => {
if (!interaction.isButton() || interaction.isModalSubmit()) return;
if (interaction.customId == "edit-shelf") {
// interaction.reply("Editing")
if (buttons.deletable)
buttons.delete()
modal = new Modal()
.setCustomId(`editModal`)
.setTitle('Edit Info')
editInfo = new TextInputComponent()
.setCustomId(`editInput`)
.setLabel("Input your edit")
.setValue(shelfObj["info"])
.setStyle("PARAGRAPH")
editRow = new MessageActionRow().addComponents(editInfo)
modal.addComponents(editRow)
await interaction.showModal(modal)
modalCheck++;
}
})
client.on("interactionCreate", async (inter) => {
if (!inter.isModalSubmit()) return;
inter.deferUpdate()
const editval = inter.fields.getTextInputValue('editInput')
// console.log(editval);
shelfObj["info"] = editval
const updatedShelf = new Shelves(shelfObj);
await updatedShelf.save()
const embed2 = new MessageEmbed()
.setColor("#0099ff")
.setThumbnail(profileImage)
.setTitle(`${shelfObj["name"]}`)
.setDescription("Displaying shelf info")
.addField("Owner", `<#${shelfObj["owner"]}>`)
if (shelfObj["info"].length <= 0) {
embed2.addField("Info", "No information added")
} else {
embed2.addField("Info", shelfObj["info"])
}
m.edit({ embeds: [embed2] })
// inter.reply("Shelf edited successfully")
// await inter.deleteReply()
// if (buttons.deletable)
// buttons.delete()
})
} else {
const embed = new MessageEmbed()
.setColor("#ff0000")
.setTitle("Shelves")
.setDescription("Unknown Shelf")
.addField("Error", "Shelf not found");
message.channel.send({ embeds: [embed] });
}

Answer 1

I've experienced this error multiple times, and I finally found out how to fix this error.
To start off, you need to install a package called nanoid (npm i nanoid in terminal).
At the top of your file, include const { nanoid } = require("nanoid");. This package is used for creating unique IDs for anything you'd like.
now, make a variable, and make it the following:
let id = `button-${nanoid()}`;
Make your .setCustomId() equal .setCustomId(id).
Lastly, make your if (interaction.customId == "edit-shelf") equal if (interaction.customId == id).
Note: If you have another error, try changing your nanoid package in your package.json to version ^3.3.4, and uninstall and install it again.