Rank 1
I am learning React, and have a very simple React application. When I follow the Getting Started steps for the Grid, I immediately get these errors when I add the <Grid> element to my application.
TS2786: 'Grid' cannot be used as a JSX component. Its instance type 'Grid' is not a valid JSX element.
Type 'Grid' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.
TS2607: JSX element class does not support attributes because it does not have a 'props' property.
import React from 'react';
import { Grid, GridColumn } from "@progress/kendo-react-grid";
const App: React.FC = () => {
return (
<Grid data={products}>
<GridColumn field="ProductName" />
<GridColumn field="UnitPrice" />
<GridColumn field="UnitsInStock" />
<GridColumn field="Discontinued" />
</Grid>
);
}
export default App;1 Answer, 1 is accepted
Hi, Christiaan,
The TS2786 error is usually related to the used React version. It is usually resolved either by:
- upgrading to React 18 or
- adding the following lines to the package.json file
"resolutiohttps://stackoverflow.com/questions/71791347/npm-package-cannot-be-used-as-a-jsx-component-type-errorsns": { "@types/react": "17.0.2", "@types/react-dom": "17.0.2" },
If none of these solutions help you and the error still persists, you can try the other solutions discussed by the other developers and choose the one that matches better the setup that you have (in terms of versions and used packages). I found the following ones:
- https://stackoverflow.com/questions/71791347/npm-package-cannot-be-used-as-a-jsx-component-type-errors
- https://stackoverflow.com/questions/71841181/some-components-cannot-be-used-as-a-jsx-component
- https://judy-webdecoded.medium.com/component-from-npm-module-cannot-be-used-as-a-jsx-component-99e895382041
In case none of this works and you are still experiencing this issue can you share your package.json file so that we can inspect it?
Regards,
Filip
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 1
I was able to fix it by adding --legacy-peer-deps to the npm install command
See also https://weekendprojects.dev/posts/fix-for-npm-conflicting-peer-dependency-error
Hi, Rajiv,
The error usually occurs when the component is not imported properly, can you please confirm if the 'GridPDFExport` is correctly imported? I created an example to test the behavior, however, I was not able to reproduce the error:
https://stackblitz.com/edit/react-6wur9j?file=app%2Fmain.tsx
Can you please modify it so that the error reproduces? This will allow me to debug it locally and see what might be causing it.
Regards,
Filip