TypeScript error from adding props to codegen interface

Developer Support
1

Good morning everyone.

I’m having a problem with some code components in Plasmic and I couldn’t find anything talking about it.

I need to pass some functions, by parameter, to a component.

The file “components/TestemonialSlider.tsx” imports a component from the file “components/plasmic/apoiase_home/PlasmicTestemonialSlider.tsx” and passes a parameter called “slideBullet” containing an object that has two functions and a number. The component “PlasmicTestemonialSlider” by in turn, import a component from the file “components/SlideBullet.tsx” and pass these parameters to this component.

The “SlideBullet” component is typed with the interface below:

export interface SlideBulletProps extends DefaultSlideBulletProps {
    handleCarroussel: (direction: string) => void,
    currentSlider: number,
    setCurrentSlider: (value: number) => void,
}

The error returned is this one:

Type '{ handleCarroussel: (direction: string) => void; currentSlider: number; setCurrentSlider:
(value: number) => void; withArrow?: SingleBooleanChoiceArg<"withArrow"> | undefined;
... 8 more ...; root: { ...; }; }' is not assignable to type '"Unexpected extraneous props"'.

Could someone help me with this problem, please?

@victor, I was told to tag you in this message because they believe you could help me with this. Could you help us with this, please?

2

hi @delighted_cardinal! could you share how you’re passing those args?

3

Sorry for the delay in responding. But the problem has been resolved. Anyway, thanks for your availability.

4

I have the same problème, have you got any suggestion ?

export interface modalProps extends DefaultModalProps {
  setModal: (state:boolean) => void;
}

Type '{ setModal: (state: boolean) => void; className?: string | undefined; form: { onFinish: (e: any) => void; }; cancel: { onClick: (e: any) => void; }; choixType: { options: { value: number; label: string | undefined; type: string; }[]; }; }' is not assignable to type '"Unexpected extraneous props"'.
5

I’ve just met the same problem (using next.js codegen).

I’ve managed to fix it by replacing

export interface PaginationContextProviderProps
  extends DefaultPaginationContextProviderProps {}

with

export interface PaginationContextProviderProps
  extends Omit<DefaultPaginationContextProviderProps, 'className'> {}
6

I think I’ve found the reason for this. It happens when the base element of your Plasmic component is a component (e.g. code component) that doesn’t accept styles, and thus, the className prop.

So one workaround is the one I’ve posted above - change the generated code manually.
Another one: change your Plasmic component’s implementation so that its’ root element is some div that accept styles, for example.