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

Open
#822 0 comments 0 reactions 0 assignees View on GitHub

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
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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react-grid-layout/react-draggable

All issues in react-grid-layout/react-draggable

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.