Repository navigation
React.lazy(() => import('react-draggable')) fails TypeScript: typeof Draggable is not assignable to ComponentType #822
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
Activity
STRML commentedon Sep 27, 2026
Agent Brief
Category: bug
Summary:
typeof Draggableandtypeof DraggableCoremust be assignable toReact.ComponentType<any>, soReact.lazy(() => import('react-draggable'))type-checks.Current behavior:
Reproduced on master (v4.7.2) against the typings test setup. Two separate failures:
@types/react@19DraggablegetDerivedStateFromPropstakes the fully-requiredDraggableProps, butGetDerivedStateFromProps<any, any>passesReadonly<any>@types/react@18DraggableandDraggableCorepropTypes?: {[key: string]: unknown}is not assignable toWeakValidationMap<any>(unknownis notValidator<any>)Both classes extend
React.Component<Partial<Props>>, but the statics and the constructor still use the full props type.Desired behavior:
Both of these type-check under React 18 and React 19 types:
Key interfaces:
Draggable.getDerivedStateFromPropsand theDraggableconstructor: the public signature should acceptPartial<DraggableProps>(or whatever the class's public props type is). Internal code may still narrow to the full type.propTypesstatic on both classes: its public type must satisfy React 18'sWeakValidationMap<any>. There is a load-bearing comment on this static. It must stay optional, and the generated.d.tsmust not importprop-types. Keep both guarantees.Acceptance criteria:
React.lazycase forDraggableand one forDraggableCoreare added to the typings test, andmake lintpasses. That covers both the React 19 and the React 18 typings config.import ... from 'prop-types'.<Draggable><div/></Draggable>) still type-checks under React 18 types. This is the Props are marked as required in TypeScript #807 regression guard.nodenext) still passes.Out of scope:
propTypesentirely.tevinch commentedon Sep 28, 2026
The source correction is in #825. Both the default lazy import and the
DraggableCorelazy import now compile without casts in the React 18 and 19 checks. Optional props and invalid-prop rejection are preserved, and the emitted component JavaScript is unchanged.For testing before an upstream release, there is an unofficial 4.7.2-based package and NodeNext check fixture. Fresh installs passed with React/types 18.3.x and 19.3.0, TypeScript 5.9.3, and
skipLibCheckdisabled. The guide includes the source, checksum and verification details. The upstream PR is still awaiting review.