React.lazy(() => import('react-draggable')) fails TypeScript: typeof Draggable is not assignable to ComponentType
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 72/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- javascript, react, typescript
- Domain
- frontend
Research direction
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.
Written by the indexing model from the issue text.
Description
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.- Dominant language
- JavaScript
- Stars
- 9.3k
- Forks
- 1k
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 4
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from react-grid-layout/react-draggable
-
Difficulty 4/5 3-5 days Newbie friendliness 25/100
react-grid-layout/react-draggable#784 · 4 comments · 2 reactions ·
-
Difficulty 3/5 1-2 days Newbie friendliness 45/100
react-grid-layout/react-draggable#782 · 1 comment ·
-
Difficulty 3/5 1-2 days Newbie friendliness 25/100
react-grid-layout/react-draggable#781 · 1 comment · 2 reactions ·
-
Difficulty 4/5 3-5 days Newbie friendliness 25/100
react-grid-layout/react-draggable#780 · 8 comments ·
-
Difficulty 3/5 1-2 days Newbie friendliness 38/100
react-grid-layout/react-draggable#779 · 1 comment · 3 reactions ·
All issues in react-grid-layout/react-draggable
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
HarperFast/skills#96 ·
-
[Block] Latest Posts [Type] Bug
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Automattic/studio#4908 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
sugarlabs/musicblocks#8847 ·