DI
discord.js - Imagine ❄•17mo ago
woodendoors7

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

I am using [email protected]. 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•17mo 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
woodendoors7OP•17mo 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 +-- [email protected], 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 🤦‍♂️

Did you find this page helpful?