DIA
discord.js - Imagine an app•10mo ago
woodendoors7

Mysterious modal error that's got everyone puzzled: Cannot properly serialize component type:

I am using discord.js@14.13.0. I copied this example from discordjs.guide, and simplified it a bit, though the error happens regardless: 
const modal = new ModalBuilder()
        .setCustomId('myModal')
        .setTitle('My Modal');

    const favoriteColorInput = new TextInputBuilder()
        .setCustomId('favoriteColorInput')
        .setLabel("What's your favorite color?")
        .setStyle(TextInputStyle.Short);
        
    const firstActionRow = new ActionRowBuilder().addComponents(favoriteColorInput);
    modal.addComponents(firstActionRow);

    await interaction.showModal(modal);
const modal = new ModalBuilder()
        .setCustomId('myModal')
        .setTitle('My Modal');

    const favoriteColorInput = new TextInputBuilder()
        .setCustomId('favoriteColorInput')
        .setLabel("What's your favorite color?")
        .setStyle(TextInputStyle.Short);
        
    const firstActionRow = new ActionRowBuilder().addComponents(favoriteColorInput);
    modal.addComponents(firstActionRow);

    await interaction.showModal(modal);
With this, I get the error Error: Cannot properly serialize component type: undefined, it happens on line modal.addComponents(firstActionRow); This is weird! When I log firstActionRow.components, the component is there fine and dandy, and it's type is 4. I asked in #djs-help-v14, everyone is just as confused as I am! Weird. Does anyone know what's going on?
2 Replies
d.js toolkit
d.js toolkit•10mo 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!
woodendoors7
woodendoors7•10mo ago
My full stack trace is 
Error: Cannot properly serialize component type: undefined
    at createComponentBuilder (\applicationbot\node_modules\@discordjs\builders\dist\index.js:1234:13)
    at \applicationbot\node_modules\@discordjs\builders\dist\index.js:1284:54
    at Array.map (<anonymous>)
    at new ActionRowBuilder (\applicationbot\node_modules\@discordjs\builders\dist\index.js:1284:35)
    at \applicationbot\node_modules\@discordjs\builders\dist\index.js:1380:76
    at Array.map (<anonymous>)
    at ModalBuilder.addComponents (\applicationbot\node_modules\@discordjs\builders\dist\index.js:1379:37)
    at createButtonHandler (/applicationbot/src/create.js:53:11)
Error: Cannot properly serialize component type: undefined
    at createComponentBuilder (\applicationbot\node_modules\@discordjs\builders\dist\index.js:1234:13)
    at \applicationbot\node_modules\@discordjs\builders\dist\index.js:1284:54
    at Array.map (<anonymous>)
    at new ActionRowBuilder (\applicationbot\node_modules\@discordjs\builders\dist\index.js:1284:35)
    at \applicationbot\node_modules\@discordjs\builders\dist\index.js:1380:76
    at Array.map (<anonymous>)
    at ModalBuilder.addComponents (\applicationbot\node_modules\@discordjs\builders\dist\index.js:1379:37)
    at createButtonHandler (/applicationbot/src/create.js:53:11)
my package.json 
{
  "name": "applicationbot",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "woodendoors7",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^16.3.1",
    "sqlite": "^5.0.1",
    "sqlite3": "^5.1.6"
  },
  "type": "module"
}
{
  "name": "applicationbot",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "woodendoors7",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^16.3.1",
    "sqlite": "^5.0.1",
    "sqlite3": "^5.1.6"
  },
  "type": "module"
}
this is all the related code (the entire is very big) 
import { ActionRow, ModalBuilder, TextInputStyle, ActionRowBuilder, TextInputBuilder } from "discord.js"

export async function createButtonHandler(interact, customID) {
    const modal = new ModalBuilder()
        .setCustomId('myModal')
        .setTitle('My Modal');

    const favoriteColorInput = new TextInputBuilder()
        .setCustomId('favoriteColorInput')
        .setLabel("What's your favorite color?")
        .setStyle(TextInputStyle.Short);
        

    const hobbiesInput = new TextInputBuilder()
        .setCustomId('hobbiesInput')
        .setLabel("What's some of your favorite hobbies?")
        .setStyle(TextInputStyle.Paragraph);


    const firstActionRow = new ActionRowBuilder().addComponents(favoriteColorInput);

    modal.addComponents(firstActionRow);
    await interact.showModal(modal);
}
import { ActionRow, ModalBuilder, TextInputStyle, ActionRowBuilder, TextInputBuilder } from "discord.js"

export async function createButtonHandler(interact, customID) {
    const modal = new ModalBuilder()
        .setCustomId('myModal')
        .setTitle('My Modal');

    const favoriteColorInput = new TextInputBuilder()
        .setCustomId('favoriteColorInput')
        .setLabel("What's your favorite color?")
        .setStyle(TextInputStyle.Short);
        

    const hobbiesInput = new TextInputBuilder()
        .setCustomId('hobbiesInput')
        .setLabel("What's some of your favorite hobbies?")
        .setStyle(TextInputStyle.Paragraph);


    const firstActionRow = new ActionRowBuilder().addComponents(favoriteColorInput);

    modal.addComponents(firstActionRow);
    await interact.showModal(modal);
}
sorry, I was in midst of trying a different version of discord.js (removing/readding discord.js) but now it's back, and still does the same thing 
{
  "name": "applicationbot",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "woodendoors7",
  "license": "ISC",
  "dependencies": {
    "discord.js": "^14.13.0",
    "dotenv": "^16.3.1",
    "sqlite": "^5.0.1",
    "sqlite3": "^5.1.6"
  },
  "type": "module"
}
{
  "name": "applicationbot",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "woodendoors7",
  "license": "ISC",
  "dependencies": {
    "discord.js": "^14.13.0",
    "dotenv": "^16.3.1",
    "sqlite": "^5.0.1",
    "sqlite3": "^5.1.6"
  },
  "type": "module"
}
There is +-- discord.js@14.7.1, I removed it globally (isn't in the ls anymore) huh ok well it works now why would it read the global dependency instead of the local one 😭 thanks jiralite 🤦‍♂️
Want results from more Discord servers?
Add your server
More Posts
giveaway botTại sao số lượng người tham gia không được thay đổi?How to close scene?so createStageInstance creates a scene, as I understand it now, how do I close it, I disconnect the Optimizing Image Processing, Storage, and Strategies to Prevent Alts and Botting: Seeking AdviceHello everyone! I'm seeking insights on optimizing image processing for my application, focusing on Why isn't my bot restarting?It returns error, however it doesn't log it in console as im using PM2. Full code: https://pastebiIs it possible to make a bot that opens the stage and starts performing?Is it possible to immediately make the bot connect to the scene by ID and immediately open the sceneFetch the user who deleted the messageAs the title mentioned, I'd like to know if there's a way to do that through **onMessageDelete**Use `client` in multiple files?Hi! I'm pretty new to d.js but have a question regarding whats common practice. I define my `client`How to `update() ` the same interaction multiple times?So I have this simple slash command that sends 3 buttons: `hello`, `hi`, and `wassup` ```js async fugetting message.author esque informationweird question i know, probably phrased weirder too, but I'm trying to get this information in the sI don't understand what's going onI'm trying to create a slash command, but every time I try I get the error shown in the screenshot b