React 18 error - cannot be used as a JSX component

[ariel-upstream]

Hi, I'm using mui-datatables version 4.0.0 and after I updated my react version to 18.1.0. I'm getting the error: TS2786: 'MUIDataTable' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<MUIDataTableProps, any, any> | null' is not a valid JSX element. Type 'Component<MUIDataTableProps, any, any>' is not assignable to type 'Element | ElementClass | null'. Type 'Component<MUIDataTableProps, any, any>' is not assignable to type 'ElementClass'.

the code for import the table: import MUIDataTable, { MUIDataTableColumn } from "mui-datatables"

Thanks.

[intayush]

This issue seems related to [https://github.com/facebook/react/issues/24304](this issue in react types). Facing the same issue on mui-datatables.

In the package.json file of mui-datatable the version of @types/react is specified as "*" which ends up downloading 18.x.x version of @types/react and therefore throwing this error. For this to be resolved this version will need to be downgraded until it's fixed in react.

Current workaround for mui-datatable -

1. Set the version of @types/react as follows "@types/react": "^17.0.44".
2. In your tsconfig.json under compilerOptions set -

"paths": {
        "react": [ "./node_modules/@types/react"]
    }

so that all the nested peer dependencies of @types/react resolve to v17

Note: This is only recommended if you have not yet switched to React 18.

[Yiannistaos]

2. In your tsconfig.json under compilerOptions set -

"paths": {
        "react": [ "./node_modules/@types/react"]
    }

It worked, thank you so much!

[michael1997]

Anyone have a fix for this if we're using React 18 and it's types?

[kstrub-fn]

Any updates on this issue?

[Feng94]

I managed to resolve this by updating @types/mui-datatables to 4.3.4