discord.js - Imagine an app•4d ago

component.toJSON is not a function

This was gonna be a message in #djs-help-v14 but I ramble too much I have a tendency to not use builders. maybe thats a flaw on my part, I don't know, but I always create embeds and commands in straight JSON. I assumed I could do the same with components V2, but when I try to send a simple container with a couple of text displays, I get this error:

TypeError: component.toJSON is not a function
    at /home/container/node_modules/@discordjs/builders/dist/index.js:1479:64
    at Array.map (<anonymous>)
    at ActionRowBuilder.toJSON (/home/container/node_modules/@discordjs/builders/dist/index.js:1479:35)
    at /home/container/node_modules/discord.js/src/structures/MessagePayload.js:152:82
    at Array.map (<anonymous>)
    at MessagePayload.resolveBody (/home/container/node_modules/discord.js/src/structures/MessagePayload.js:151:49)
    at GuildMessageManager.edit (/home/container/node_modules/discord.js/src/managers/MessageManager.js:186:8)
    at Message.edit (/home/container/node_modules/discord.js/src/structures/Message.js:834:34)
    at file:///home/container/dist/timers/servers.js:89:29
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

TypeError: component.toJSON is not a function
    at /home/container/node_modules/@discordjs/builders/dist/index.js:1479:64
    at Array.map (<anonymous>)
    at ActionRowBuilder.toJSON (/home/container/node_modules/@discordjs/builders/dist/index.js:1479:35)
    at /home/container/node_modules/discord.js/src/structures/MessagePayload.js:152:82
    at Array.map (<anonymous>)
    at MessagePayload.resolveBody (/home/container/node_modules/discord.js/src/structures/MessagePayload.js:151:49)
    at GuildMessageManager.edit (/home/container/node_modules/discord.js/src/managers/MessageManager.js:186:8)
    at Message.edit (/home/container/node_modules/discord.js/src/structures/Message.js:834:34)
    at file:///home/container/dist/timers/servers.js:89:29
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

I have some data I iterate over to produce the components, so I start out with an array, components and then I push my components to it as I iterate, here is an example of what I'm doing thats failing:

components.push(
  {
    type: ComponentType.Container,
    accent_color: client.colors.Blurple,
    components: [
      {
        type: ComponentType.Section,
        components: [
          {
            type: ComponentType.TextDisplay,
            content: 'some text here, not important what'
          }
        ],
        accessory: {
          type: ComponentType.Thumbnail,
          media: {
            url: 'this is a valid image URL in my code'
          }
        }
      },
      {
        type: ComponentType.Separator
      },
      {
        type: ComponentType.TextDisplay,
        content: 'some more content, not relevant'
      }
    ]
  }
);

components.push(
  {
    type: ComponentType.Container,
    accent_color: client.colors.Blurple,
    components: [
      {
        type: ComponentType.Section,
        components: [
          {
            type: ComponentType.TextDisplay,
            content: 'some text here, not important what'
          }
        ],
        accessory: {
          type: ComponentType.Thumbnail,
          media: {
            url: 'this is a valid image URL in my code'
          }
        }
      },
      {
        type: ComponentType.Separator
      },
      {
        type: ComponentType.TextDisplay,
        content: 'some more content, not relevant'
      }
    ]
  }
);

I then fetch a message in a channel, that was already sent using the flags for IsComponentsV2, and I supply components like so:

await message.edit({ components });

await message.edit({ components });

am I doing something wrong? do I have to use builders instead?

22 Replies

d.js toolkit•4d 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!

sludgeOP•4d ago

npm ls discord.js
└── [email protected]

npm ls discord.js
└── [email protected]

node -v
v23.6.1

node -v
v23.6.1

InFiNiTy•4d ago

Try to use components: components @sludge Might sound irrational but Worth shot

sludgeOP•4d ago

there is zero reason why components: components would work if components doesn't, but I tried it just so I can say I did and as expected, the error remains

InFiNiTy•4d ago

Hmm

sludgeOP•4d ago

well, I decided to mess with the builders to see if I could at least confirm that they work that way, and now I get a different error...

file:///home/container/dist/timers/servers.js:2
import { TextDisplayBuilder } from 'discord.js';
^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'TextDisplayBuilder' not found. The requested module 'discord.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'discord.js';
const { TextDisplayBuilder } = pkg;
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:191:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:337:24)
at async ExtendedClient.importFile (file:///home/container/dist/structures/Client.js:161:17)
at async file:///home/container/dist/structures/Client.js:197:27

file:///home/container/dist/timers/servers.js:2
import { TextDisplayBuilder } from 'discord.js';
^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'TextDisplayBuilder' not found. The requested module 'discord.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'discord.js';
const { TextDisplayBuilder } = pkg;
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:191:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:337:24)
at async ExtendedClient.importFile (file:///home/container/dist/structures/Client.js:161:17)
at async file:///home/container/dist/structures/Client.js:197:27

something is definitely not right but considering I am using a few builders for action rows and buttons elsewhere without issue, I struggle to see why these specifically don't work either

InFiNiTy•4d ago

Holy fuck In all honesty im impressed how it fucked up that bad

Amgelo•4d ago

just wait for the fix for now should be soon

sludgeOP•4d ago

it genuinely makes no sense. I got 'lucky' yesterday with another issue where it transpired there was a bug and it got fixed not long after, but this now just seems like a me issue thats the thing, I feel like this has to be an issue with my code as opposed to a bug in djs

InFiNiTy•4d ago

wait, I'll send u my sample which works and its raw JSON

sludgeOP•4d ago

that'd be awesome

Amgelo•4d ago

toJSON was indeed missing

InFiNiTy•4d ago

components: [
                {
                    type: ComponentType.Container,
                    accent_color: colors.normal,
                    components: [
                        {
                            type: ComponentType.MediaGallery,
                            items: [
                                {
                                    media: {
                                        url: `veryinterestingurltoanimage`,
                                        
                                    }
                                }
                            ]
                        },
                    ],
                        {
                            type: ComponentType.Section,
                            components: [
                                {
                                    type: ComponentType.TextDisplay,
                                    content: stripIndents`
                                    **${interaction.guild?.name} - Basic informations**
                                    -# Here you can find overview of your server, have a look around!
                                    
                                    ${interaction.guild?.description ?? 'No description provided'}`                        
                                },
                            ],
                            accessory: {
                                type: ComponentType.Thumbnail,
                                media: {
                                    url: interaction.guild?.iconURL() as string
                                }
                            }
                        },
                        {
                            type: ComponentType.TextDisplay,
                            content: `blahblahblah`
                        },
                    }

]

components: [
                {
                    type: ComponentType.Container,
                    accent_color: colors.normal,
                    components: [
                        {
                            type: ComponentType.MediaGallery,
                            items: [
                                {
                                    media: {
                                        url: `veryinterestingurltoanimage`,
                                        
                                    }
                                }
                            ]
                        },
                    ],
                        {
                            type: ComponentType.Section,
                            components: [
                                {
                                    type: ComponentType.TextDisplay,
                                    content: stripIndents`
                                    **${interaction.guild?.name} - Basic informations**
                                    -# Here you can find overview of your server, have a look around!
                                    
                                    ${interaction.guild?.description ?? 'No description provided'}`                        
                                },
                            ],
                            accessory: {
                                type: ComponentType.Thumbnail,
                                media: {
                                    url: interaction.guild?.iconURL() as string
                                }
                            }
                        },
                        {
                            type: ComponentType.TextDisplay,
                            content: `blahblahblah`
                        },
                    }

]

that should work if not im out oh and dont mind colors.normal, its just a number so u can replace it

sludgeOP•4d ago

unfortunately, that gives me the same component.toJSON is not a function error. but Amgelo's response suggests that its a known issue being fixed - so the question is, how did it work for you 😅 I've also spent way too many hours this weekend already trying to work on this

InFiNiTy•4d ago

well idrk XD it just worked first try

InFiNiTy•4d ago

and looks like that

InFiNiTy•4d ago

maybe bc im using bun instead of node ¯\_(ツ)_/¯

sludgeOP•4d ago

I guess. its 4am and I'm too tired to consider the implications of using a different runtime 😴 I'll patiently wait for the patch and see whats up, I'm eager to replace a few of my embeds with containers, but it won't kill me to wait a few days if I need to before I mess around with it

InFiNiTy•4d ago

wait hold on i might have fucked up code @sludge try this (edited version)

sludgeOP•4d ago

I already fixed your code when I tried it, it was missing some closing brackets, but the error is unrelated

InFiNiTy•4d ago

welp idk then, wait for patch

sludgeOP•3d ago

hilariously, this was actually an issue with my code and I blame lack of sleep on it. in case anyone cares, despite my local development environment being up to date, I forgot to update djs and its dependencies in my sort of mid staging area where I test using live data. this meant it had no idea what the new components even were 😅 all is working now as it should

Gaming

Programming

component.toJSON is not a function

Did you find this page helpful?