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

[paztis]

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.