Create circular relationships between blocks

[eudago]

Describe the Bug

I want to create a block (named BlockA) that can be used to wrap other blocks (BlockB), and the BlockB can have the BlockA as a child.

But I'm facing a circular dependency issue, the error is

Error: Cannot access 'BlockA' before initialization

I expect to resolve this by using dynamic imports to avoid the circular dependency issue, like this.

....
BlockB
....
content: [
    {
        type: "blocks",
        name: "blocks",
        required: false,
        blocks: async () => {
            const { BlockA } = await import("../example/blockA.block");
            return [
                BlockA,
            ];
        },
    },
],

However, blocks don't accept a promise. How can I resolve this? Is it possible to use blocks recursively?

Link to the code that reproduces this issue

.

Reproduction Steps

Create a two blocks with circular relationships between each other

Which area(s) are affected? (Select all that apply)

area: core

Environment Info

Payload: 3.0.0-beta.28
Nextjs: 14.3.0-canary.21

[r1tsuu]

Hey @eudago, recursive blocks aren't a thing in Payload for now, but you can try this workaround https://discord.com/channels/967097582721572934/967097582721572937/1293653995298099292

[eudago]

Hello @r1tsuu , the example you provided does allow for some recursion, but it doesn't solve the issue I'm facing. In your case, it's a container block that continuously invokes itself, but my situation involves two distinct blocks that reference each other, which leads to a circular import issue and a compilation error. I'd like to know if this feature is something you're considering or if we could find a way to address it.

Regardless, thank you for your response

[eudago]

To provide a bit more context, the use case would be for a web builder. We could have a grid block and a card block. In this case, within the grid, we want to place block components, and in turn, within the card component, we want to embed the grid