React.lazy(() => import('react-draggable')) fails TypeScript: typeof Draggable is not assignable to ComponentType
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
- Công nghệ
- javascript, react, typescript
- 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
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- 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.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue khác của react-grid-layout/react-draggable
-
Độ khó 4/5 3-5 ngày Mức phù hợp với người mới 25/100
react-grid-layout/react-draggable#784 · 4 bình luận · 2 reaction ·
-
V4.5.0 Chrome Extension Error Đang mở
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 45/100
react-grid-layout/react-draggable#782 · 1 bình luận ·
-
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 25/100
react-grid-layout/react-draggable#781 · 1 bình luận · 2 reaction ·
-
the new version 4.5.0 会导致系统打包报错 Đang mở
Độ khó 4/5 3-5 ngày Mức phù hợp với người mới 25/100
react-grid-layout/react-draggable#780 · 8 bình luận ·
-
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 38/100
react-grid-layout/react-draggable#779 · 1 bình luận · 3 reaction ·
Tất cả issue của react-grid-layout/react-draggable
Issue tương tự
-
bug
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 76/100
avniproject/avni-client#2135 ·
-
enhancement
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 70/100
babalae/bettergi-scripts-list#3674 ·
-
A-Release-Notes C-Editing D-Modest S-Ready-For-Implementation
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 72/100
bevyengine/bevy-website#2595 ·
-
ecosystem wording
Độ khó 1/5 Dưới một giờ Mức phù hợp với người mới 90/100
matrix-org/matrix.org#3649 ·
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 88/100
vadimdemedes/ink#1029 ·