React 18 typescript problem

[vocko]

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'.

[Krzysztof]

+1

[Tuncay Huseynov]

is there any progress?

[Rein]

I think changing the dependency to react 18 in https://github.com/casesandberg/react-color/blob/master/package.json#L90 will fix this issue.

Can someone confirm if that is working?

[Newton Kumar]

I think changing the dependency to react 18 in https://github.com/casesandberg/react-color/blob/master/package.json#L90 will fix this issue.

Can someone confirm if that is working?

No, it's not working.

[Jean-Charles (jc)]

it would be really nice to have this fixed, I have the same with

'ChromePicker' cannot be used as a JSX component.

[Iulian Radu]

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"
  },

[Iulian Radu]

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

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

[Faran Shaikh]

Still getting this error for SketchPicker

Its instance type 'SketchPicker' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'import("/Users/faran/Documents/code/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.

        <SketchPicker
        ~~~~~~~~~~~~

I have the following in package.json

    "react": "^18.2.0",
    "react-color": "2.19.3",
    "react-dom": "^18.2.0",

    "resolutions": {
        "@types/react": "^18.0.15",
        "@types/react-dom": "^18.0.6"
     },

[Alfonso Graziano]

Same error for me... Does someone have a working solution?

[Iamgabrielsoft]

i had to edit my answer here, @iulian-radu-at solution worked for me

[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