Crash when interacting with custom component's array prop

[jose_aranda]

Hi, I’m encountering an issue when trying to add a new item to this component — the screen goes completely white and I get an “Unexpected error” message.

This is how I’m registering the component:

PLASMIC.registerComponent(Test, {
  name: "Test",
  section: "Section Red",
  thumbnailUrl:
    "https://www.dropbox.com/scl/fi/fw4ian0xcmsmpj4si0mzd/PlasmicSimpleGallery.webp?rlkey=b8jru84pwsbvpz3luf4yezdkz&raw=1",
  props: {
    className: {
      type: "string",
      required: false,
    },
    items: {
      type: "array",
      required: true,
      itemType: {
        type: "object",
        fields: {
          image: {
            type: "image",
            required: true,
            displayName: "Image",
          },
          title: {
            type: "string",
            required: true,
            displayName: "Title",
          },
          href: {
            type: "string",
            required: false,
            displayName: "Link",
          },
        },
      },
    },
    showLoadMoreButton: {
      type: "boolean",
      required: false,
      defaultValue: true,
    },
    buttonText: {
      type: "string",
      required: false,
    },
  },
} as any);

Here’s the error I get when trying to add an item:

And this is how it looks in the interface:

Do you have any idea what might be causing this crash? I’m wondering if there’s something wrong in how the array or object types are defined.

Thanks in advance!

[sarah_ahmed]

Hi @jose_aranda, the correct type for the image field is imageUrl, not image.

Also, the reason TypeScript didn’t catch this mismatch is because the metadata was typecast using as any, which bypasses type checking.

[jose_aranda]

But if I want it to appear that way because it’s more user-friendly for my team, is it possible to do that?

[sarah_ahmed]

The imageUrl prop type should display just like this. As per the docs at Code components API reference | Learn Plasmic, the imageUrl prop is “Configured via the Studio image picker; useful for picking an image asset uploaded to the project”