Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mortalYoung opened this issue Dec 16, 2024 · 1 comment

Comments

@mortalYoung
Copy link

Describe the bug

I got error messages like that :

Could not find a declaration file for module 'react-grid-layout'. '/nodebox/node_modules/.store/[email protected]/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

@alexandros-megas
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants