[Question] why @types/react-grid-layout bebind the master branch's version
mortalYoung opened this issue · 2 comments
mortalYoung commented
Describe the bug
I got error messages like that :
Could not find a declaration file for module 'react-grid-layout'. '/nodebox/node_modules/.store/react-grid-layout@1.5.0/node_modules/react-grid-layout/index.js' implicitly has an 'any' type.
and i tried to install @types/react-grid-layout whose lastest version is 1.3.5.
Is it competitable with 1.5.0 or just forget to publish the types?
Your Example Website or App
https://codesandbox.io/p/sandbox/staging-bush-3lvt7?file=%2Fsrc%2FShowcaseLayout.js%3A5%2C21
Steps to Reproduce the Bug or Issue
- Open
ShowcaseLayout.js - Hover to
import { Responsive, WidthProvider } from "react-grid-layout";
Expected behavior
I could install @types/react-grid-layout with 1.5.0
react-grid-layout library version
1.5.0
Operating System Version
macOS
Browser
Chrome
Additional context
No response
Screenshots or Videos
alexandros-megas commented
I'm also having this issue. If I add version 1.3.5 of the @types package, then I get a weird error:
import { Responsive, WidthProvider, Layouts, Layout, ResponsiveProps, WidthProviderProps } from 'react-grid-layout';
import 'react-grid-layout/css/styles.css';
const ResponsiveReactGridLayout = WidthProvider(Responsive);
const DraggableGridLayout: React.FC<DraggableGridProps> = ({ layoutState, setLayoutState, children, gridLayoutProps = {} }) => {
return (
<ResponsiveReactGridLayout
measureBeforeMount={false}
draggableHandle=".draggable-card-drag-handle"
layouts={layoutState}
onLayoutChange={(_, updatedLayouts) => {
setLayoutState(filterRequiredBreakpoints(updatedLayouts));
}}
rowHeight={CARD_ROW_HEIGHT_UNIT}
cols={{ sm: 12, md: 12, lg: 12 }}
breakpoints={{ lg: 1200, md: 720, sm: 0 }}
margin={[24, 24]}
isDroppable
useCSSTransforms
autoSize
{...gridLayoutProps}
>
{children}
</ResponsiveReactGridLayout>
);
}; - error TS2786: 'ResponsiveReactGridLayout' cannot be used as a JSX component.
Its instance type 'Component<ResponsiveProps & WidthProviderProps, any, any>' is not a valid JSX element.
Property 'refs' is missing in type 'Component<ResponsiveProps & WidthProviderProps, any, any>' but required in type 'ElementClass'.
91 <ResponsiveReactGridLayout
~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@types/react/index.d.ts:510:9
510 refs: {
~~~~
'refs' is declared here.
I think this is caused by conflicting type definitions for react, between what my project uses versus the @types library.

