React 18 typescript problem

React has tightened it¤s typing restrictions in v18 and as a result there are a several typescript errors in the project:

 TS2786: 'Saturation' cannot be used as a JSX component.
<e>   Its instance type 'Saturation' is not a valid JSX element.
<e>     The types returned by 'render()' are incompatible between these types.
<e>       Type 'import("/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.

<e> TS2786: 'Hue' cannot be used as a JSX component.
<e>   Its instance type 'Hue' is not a valid JSX element.
<e>     The types returned by 'render()' are incompatible between these types.
<e>       Type 'import("/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.

[iulian-radu-at]

The same with SketchPicker so it looks like all exported sub-components are affected 😭

The working solution: add in package.json

  "resolutions": {
    "@types/react": "^18.0.0"
  },

[vocko]

The working solution is to add in package.json the bellow setting and re-install the packages:

  "resolutions": {
    "@types/react": "^18.0.0"
  },

For anyone still wondering about this one, RE-INSTALL the packages after adding the resolutions is the key to get this working.

Package.json (excerpt)

"resolutions": {
  "@types/react": "^18.0.26",
  "@types/react-dom": "^18.0.9"
},

yarn remove react-color @types/react-color
yarn add react-color-@types/react-color