My react project with "react": "^18.2.0", version and "react-select": "5.4.0", version, is getting errors

Question

My react project with "react": "^18.2.0", version and "react-select": "5.4.0", version, is getting errors today, this project was running smoothly till yesterday.

When I'm trying to build my project it's giving me this error below.

TS2322: Type '{ color: THEME.defaultHighLightColor; zIndex: number; accentColor?: Property.AccentColor | readonly string[] | Property.AccentColor[] | undefined; alignContent?: Property.AlignContent | readonly string[] | Property.AlignContent[] | undefined; ... 953 more ...; label?: string | undefined; }' is not assignable to type 'CSSObjectWithLabel'.   Type '{ color: THEME.defaultHighLightColor; zIndex: number; accentColor?: Property.AccentColor | readonly string[] | Property.AccentColor[] | undefined; alignContent?: Property.AlignContent | readonly string[] | Property.AlignContent[] | undefined; ... 953 more ...; label?: string | undefined; }' is not assignable to type 'CSSObject'.
    Property 'accentColor' is incompatible with index signature.
      Type 'AccentColor | readonly string[] | AccentColor[]' is not assignable to type 'CSSInterpolation'.
        Type 'readonly string[]' is not assignable to type 'CSSInterpolation'.
          Type 'readonly string[]' is not assignable to type 'ArrayCSSInterpolation'.
    17 | const customStyles: StylesConfig<ISelectorOption> = {
    18 |   menuPortal: (styles, _): CSSObjectWithLabel => {

   19 |     return {
       |     ^^^^^^^^
   20 |       ...styles,
       | ^^^^^^^^^^^^^^^^
   21 |       color: THEME.defaultHighLightColor,
       | ^^^^^^^^^^^^^^^^
   22 |       zIndex: 9999,
       | ^^^^^^^^^^^^^^^^
   23 |     };
       | ^^^^^^^

    24 |   },
    25 |   control: (styles, { isDisabled }): CSSObjectWithLabel => {
    26 |     return {

enter image description here

I tried deleting node_modules and package.lock.json and imported react-select 5.4.0 exact version still I'm getting the same issues

Hilaryhilbert

Answer 1

As a workaround, you can use type assertion on each entry in your override list:

menuPortal: (styles, _): CSSObjectWithLabel => {
   return {
     ...styles,
     color: THEME.defaultHighLightColor,
     zIndex: 9999,
   } as CSSObjectWithLabel;
}

Optionally, you could also drop the type declaration on the function.

With react-select, the workaround might be necessary. As of this writing, type definitions for the library seem to be in need of some improvement.

Annuitant

Answer 2

I was getting the same error (upgrading from react-select 4.? to 5.8)

I just changed the base prop to any as a workaround.

styles={{ menuPortal: (base: any) => ({ ...base, zIndex: 9999 }) }}

Theory

Answer 3

I had the same issue and fixed it by following this answer on a react-select open issue: https://github.com/JedWatson/react-select/issues/5825#issuecomment-1850472549

In your package.json, you can add the following line

"resolutions": {
  "csstype": "3.1.2"
}

Porous