"Type error with Plasmic Select component's onChange property"

Issues
1

Hi,

Suddenly, we got a type error linked with the Select component from Plasmic

Error: src/components/plasmic/SelectBase.tsx(15,65): error TS2345: Argument of type 'SelectBaseProps' is not assignable to parameter of type 'BaseSelectProps'.
Types of property 'onChange' are incompatible.
    Type '((value: string) => void) | undefined' is not assignable to type '((value: string | null) => void) | undefined'.
      Type '(value: string) => void' is not assignable to type '(value: string | null) => void'.
        Types of parameters 'value' and 'value' are incompatible.
          Type 'string | null' is not assignable to type 'string'.
            Type 'null' is not assignable to type 'string'.

Project ID: giKqUTLdPG6ztkA7gUkrBg

image.png
image.png2118×1310 352 KB

image.png
image.png2876×1350 323 KB

2

Hi, thanks for reporting the error, it’s safe to ignore this error, we would be looking into fixing it, in the meantime

3

Hi @fmota, thanks for your message. Is there something we can do about it, because right now the file gets generated automatically with plasmic codegen from our github action pipeline, so it’s not something that we can control?

4

You should be able to edit this file without having the content overwritten by the following plasmic syncs, is it being overwritten currently ?

5

@fmota Yes exactly… we currently have this approach plasmic sync -p giKqUTLdPG6ztkA7gUkrBg --force --yes

6

Even with that, I don’t think we should be overwriting this file, this should be a skeleton that you are free to edit, only the files with names in format Plasmic* should be getting touched

7

@fmota Yes makes sense that, that’s why I wanted edit the file to surpass the ts error

const SelectBase_ = (props: SelectBaseProps, ref: SelectRef) => {
  // @ts-expect-error: Error: src/components/plasmic/SelectBase.tsx(15,65): error TS2345: Argument of type 'SelectBaseProps' is not assignable to parameter of type 'BaseSelectProps'. Types of property 'onChange' are incompatible.
  const { plasmicProps, state } = PlasmicSelectBase.useBehavior(props, ref)
  return <PlasmicSelectBase {...plasmicProps} />
}

to surpass the error, but for some reason the build from github action pipeline still fails, while locally the build works

8

In github action pipeline we are using the same command npm run build:prod . Executing it locally works, on github actions fails with the ts error

9

The only difference is that on github action pipeline we run through npm ci, and not npm i

10

Quite weird, if you perform the same steps with npm ci locally does the build work ?

11

@fmota yes confirm. Just tried now and it still fails in github action pipeline

12

@fmota

Even with that, I don’t think we should be overwriting this file, this should be a skeleton that you are free to edit, only the files with names in format Plasmic* should be getting touched
Maybe a problem here?

image.png
image.png2160×936 416 KB

13

Could you share the full list of commands that you action performs ? Feel free to dm if necessary

14

Untitled

15

(I am using the same node version locally; 20.9.0)

16

DM you with some more information, thanks!

17

We have that problem as well, but in Select.tsx not SelectBase:

./components/Select.tsx:15:61
Type error: Argument of type 'SelectProps' is not assignable to parameter of type 'BaseSelectProps'.
  Types of property 'onChange' are incompatible.
    Type '((value: string) => void) | undefined' is not assignable to type '((value: string | null) => void) | undefined'.
      Type '(value: string) => void' is not assignable to type '(value: string | null) => void'.
        Types of parameters 'value' and 'value' are incompatible.
          Type 'string | null' is not assignable to type 'string'.
            Type 'null' is not assignable to type 'string'.

  13 | }
  14 | function Select_(props: SelectProps, ref: SelectRef) {
> 15 |   const { plasmicProps, state } = PlasmicSelect.useBehavior(props, ref);
     |                                                             ^
  16 |   return <PlasmicSelect {...plasmicProps} />;
  17 | }
  18 |
18

Thanks for reporting @occupational_moth - in our case SelectBase has been created from Select Plasmic component so it’s almost the same

19

cc: @fmota

20

Update: this has been resolved, thanks for the support!