Typescript error trying to override a named element

I’m having a typescript error, not sure if this belongs in issues or general - as things are working, just ts is complaining. I created a Component using the studio. The component has two slots and a named element. I’m able to override the named element, but typescript doesn’t seem to like it. Details in thread.

Here is what my component looks like. It has a slot target of label and error and the input field is a named element, named input

Here is what it looks like API explorer, working as I intended

Inside my code (from codegen), when I display a page that has this component in it, it is showing me a type error. That page has that component as a named element, named name.

This is what the code looks like

        label: 'Store Name',
        error: action?.errors?.name,
        isError: !!action?.errors?.name,
        input: { placeholder: 'override this with stuff' },

This IS working, the placeholder on the input field is overwritten.

However, typescript doesn’t like it.

Anyone have suggestions?

Hello Dusty! For named elements, we don’t expose the prop in the skeleton component (the component you can change, for example: PlasmicButton generates the skeleton component Button). So to fix this, all you need to do is go to the skeleton component of the InputFormField and expose a new prop there named input and pass it as a prop to the PlasmicInputFormField. Hope that helps!

Oh I see. I didn’t realize the PlasmicComponents referenced the skeleton components. I had considered deleting those files if I wasn’t using them, I guess I would have found out then. :slightly_smiling_face:

Here is how I solved it and TS is happy

export interface FormInputFieldProps extends DefaultFormInputFieldProps {
  input: PlasmicFormInputField__OverridesType['input']

Sounds good! You can edit all the props in the skeleton files to your need and it’s also in the skeleton components where you add logic/state to your plasmic components!