React.lazy(() => import('react-draggable')) fails TypeScript: typeof Draggable is not assignable to ComponentType

Đang mở
#822 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
72/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Lĩnh vực
frontend

Hướng nghiên cứu

Start with the generated declarations in build/cjs/Draggable-*.d.ts and trace them back to the source declaration or component entry point. Run the provided React.lazy reproduction with tsc --noEmit, then verify that the generated Draggable type is assignable to React's ComponentType and that direct JSX usage remains valid.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Bug report

After upgrading to react-draggable@4.7.1, this no longer type-checks:

import {lazy} from 'react';

const Draggable = lazy(() => import('react-draggable'));

JSX usage of is fine. The error is only on lazy() / ComponentType.

This looks related to #807 / #809 (props treated as required under React 18 types). 4.7.1 made the class extend React.Component<Partial, …>, but getDerivedStateFromProps is still typed against the fully required DraggableProps.

Error

Type 'Promise<typeof import("react-draggable/build/cjs/cjs")>' is not assignable to type 'Promise<{ default: ComponentType<any>; }>'.
  Type 'typeof import("react-draggable/build/cjs/cjs")' is not assignable to type '{ default: ComponentType<any>; }'.
    Types of property 'default' are incompatible.
      Type 'typeof Draggable' is not assignable to type 'ComponentType<any>'.
        Type 'typeof Draggable' is not assignable to type 'ComponentClass<any, any>'.
          Types of property 'getDerivedStateFromProps' are incompatible.
            Type '({ position }: DraggableProps, { prevPropsPosition }: DraggableState) => Partial<DraggableState> | null'
              is not assignable to type 'GetDerivedStateFromProps<any, any>'.
              Types of parameters '__0' and 'nextProps' are incompatible.
                Type 'Readonly<any>' is not assignable to type 'DraggableProps'.
                  Type 'Readonly<any>' is missing the following properties from type 'DraggableCoreDefaultProps':
                    allowAnyClick, allowMobileScroll, disabled, enableUserSelectHack, and 5 more.

Cause
From the generated declarations shipped in 4.7.1 (build/cjs/Draggable-*.d.ts):

declare class Draggable extends React.Component<Partial<DraggableProps>, DraggableState> {
    props: DraggableProps;
    static defaultProps: DraggableProps;
    static getDerivedStateFromProps(
        { position }: DraggableProps,
        { prevPropsPosition }: DraggableState
    ): Partial<DraggableState> | null;
    constructor(props: DraggableProps);
}

React.lazy() requires default to be a ComponentType. Checking getDerivedStateFromProps against GetDerivedStateFromProps<any, any> passes Readonly as the first argument. That is not assignable to required DraggableProps (allowAnyClick, disabled, …).

Expected
typeof Draggable should be assignable to ComponentType<Partial> / ComponentType, so React.lazy(() => import('react-draggable')) type-checks.

Likely fix: type the static / constructor with the same props as the class, e.g.:

static getDerivedStateFromProps(
    { position }: Partial<DraggableProps>,
    { prevPropsPosition }: DraggableState
): Partial<DraggableState> | null;
constructor(props: Partial<DraggableProps>);

Workaround

import type {ComponentType} from 'react';
import {lazy} from 'react';
import type {DraggableProps} from 'react-draggable';
const Draggable = lazy(async () => {
    const {default: DraggableComponent} = await import('react-draggable');
    return {default: DraggableComponent as ComponentType<Partial<DraggableProps>>};
});

Environment
react-draggable: 4.7.1
react / react-dom: 19.3
@types/react / @types/react-dom: 19.3
TypeScript: (fill in)
Bundler / module: ESM ("type": "module")

Reproduction

import {lazy} from 'react';
const Draggable = lazy(() => import('react-draggable'));

tsc --noEmit fails on that line. Direct JSX

does not.

Ngôn ngữ chính
JavaScript
Star
9.3k
Fork
1k
Merge trung bình
3 ngày 8 giờ
Pull request đã merge (30 ngày)
4

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react-grid-layout/react-draggable

Tất cả issue của react-grid-layout/react-draggable

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.