React 18: TS2786: 'Rating' cannot be used as a JSX component.

[mleister97]

After upgrading to React 18.2.0 i get the following error when using the Rating-Component

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

Please fix for all typescript users!

[hanieljazzar]

try wrapping the component in a new component

               
               import { Star } from "react-feather";
                import Rating from "react-rating";
                
                const RatingComponent = ({ initialRating = 0, readonly = false, onChange = null, showCount = false, showBy = false }) => {
                    return (
                        <>
                            <div className=" mb-1">
                                <Rating
                                    readonly={readonly}
                                    initialRating={initialRating}
                                    emptySymbol={<Star size={32} fill={readonly ? "#FFF" : '#DEDFE3'} stroke={readonly ? "#FFF" : '#DEDFE3'} />}
                                    fullSymbol={<Star size={32} fill="#FC8264" stroke="#FC8264" />}
                                    onChange={onChange}
                                />
                            </div>
                        </>
                    )
                }
                
                export default RatingComponent
      

[adham618]

@ dreyescat you need to update react types to 18
https://stackoverflow.com/questions/71841181/some-components-cannot-be-used-as-a-jsx-component

[zguo123]

@adham618 @hanieljazzar Unfortunately, your solutions do not solve the problem. It still shows the same errors. It's up to the developers to update their components to be usable with React 18

[rdtawagon]

Did anyone solve this issue? Having the same problem on react typescript

[adham618]

@rdtawagon
delete node_modules and yarn.lock
then add this to the package.json
"resolutions": {
"@types/react": "^18.0.2",
"@types/react-dom": "18.0.2"
}

[hardikwebiots]

@rdtawagon delete node_modules and yarn.lock then add this to the package.json "resolutions": { "@types/react": "^18.0.2", "@types/react-dom": "18.0.2" }

This solution did not resolve my issue do you have any other solution?

[bauerbach]

The actual problem is that this project is dead.

[ThaheemDev]

// Rating.jsx
import React from "react";
import Rating from "react-rating";

const NewRating = ({ ...props }) => <Rating {...props} />;
export default NewRating;

// Rating.d.ts
import { FC } from "react";
import { RatingComponentProps } from "react-rating";

declare const NewRating: FC;

export default NewRating;

You can copy and paste this code into a file named Rating.jsx in your project's desired directory. This file will contain both the JSX component (NewRating) and the corresponding declaration file (Rating.d.ts). Make sure that the react-rating package is installed in your project before using this component.

[yakovenkoroman1993]

I suggest such work around for TS

import React from "react";
import ReactRating, { RatingComponentProps } from "react-rating";

type Props = RatingComponentProps;

export default function Rating(props: Props) {
  const Root = ReactRating as unknown as ((props: Props) => JSX.Element);

  return (
    <Root {...props} />
  );
}