TS2322: Type 'string | number | any[] | { value: any; symbol: any; exponent: number; unit: string; }' is not assignable to type 'ReactNode'.

[greenpau]

After the upgrade to React 18, I started getting the following Typescript errors:

ERROR in src/components/CreateJob/ReviewStep.tsx:102:47
TS2322: Type 'string | number | any[] | { value: any; symbol: any; exponent: number; unit: string; }' is not assignable to type 'ReactNode'.
  Type '{ value: any; symbol: any; exponent: number; unit: string; }' is not assignable to type 'ReactNode'.
    100 |               header: 'File Size',
    101 |               cell: (item) => {
  > 102 |                 return <Box textAlign="right">{filesize(item.size, { base: 2, standard: 'jedec' }) || '-'}</Box>;
        |                                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    103 |               },
    104 |             },
    105 |           ]}

ERROR in src/components/FileUpload/FileUploadTable.tsx:227:39
TS2322: Type 'string | number | any[] | { value: any; symbol: any; exponent: number; unit: string; }' is not assignable to type 'ReactNode'.
    225 |       header: 'Size',
    226 |       cell: (item) => {
  > 227 |         return <Box textAlign="right">{filesize(item.size, { base: 2, standard: 'jedec' }) || '-'}</Box>;
        |                                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    228 |       },
    229 |       sortingField: 'size',
    230 |     },

ERROR in src/components/FileUpload/StagedFileList.tsx:48:43
TS2322: Type 'string | number | any[] | { value: any; symbol: any; exponent: number; unit: string; }' is not assignable to type 'ReactNode'.
  Type '{ value: any; symbol: any; exponent: number; unit: string; }' is not assignable to type 'ReactNode'.
    46 |           header: 'File Size',
    47 |           cell: (item) => {
  > 48 |             return <Box textAlign="right">{filesize(item.file.size, { base: 2, standard: 'jedec' }) || '-'}</Box>;
       |                                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    49 |           },
    50 |         },
    51 |         {

[avoidwork]

That file is generated; tsc bug? Considering this issue is entirely imaginary, what is the suggested problem/solution?

[greenpau]

That file is generated; tsc bug?

Yes. There is some difference between React 17 and React 18 handling of the filesize module.

[avoidwork]

does the type file for earlier versions work? the persons chose a diff structure than tsc generates.

[greenpau]

@avoidwork , yes. I was using filesize with react 17 and things worked just fine.

[avoidwork]

@greenpau are you using @types/react 18.0.0? from what i'm reading this has nothing to do with filesize and simply relates to the optional object output.

[felixhoffmnn]

I ran into the same problem. The main problem is that the return type from the filesize() function can be of the following types:

string | number | any[] | {
    value: any;
    symbol: any;
    exponent: number;
    unit: string;
};

If you want to use the result of the filesize() function inside a JSX element, the expected type is a string, integer, or iterable, which does not quite match the defined type of object. @avoidwork is it beneficial to combine these different types, or could we split them into separate functions to prevent the mismatch with ReactNode?

I was able to fix the type error by just parsing the result to a string (like filesize().toString()). But that solution is not as pretty as I would like it.