react-grid-layout/react-grid-layout

[Question] why @types/react-grid-layout bebind the master branch's version

mortalYoung opened this issue · 2 comments

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

  1. Open ShowcaseLayout.js
  2. 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

image

image

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.