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

Abierto
#822 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
72/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
javascript, react, typescript
Área
frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
JavaScript
Estrellas
9.3k
Forks
1k
Merge medio
3 d 8 h
PR fusionados (30 d)
4

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de react-grid-layout/react-draggable

Todos los issues de react-grid-layout/react-draggable

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.