React.lazy(() => import('react-draggable')) fails TypeScript: typeof Draggable is not assignable to ComponentType
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
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de react-grid-layout/react-draggable
-
Dificultad 4/5 3-5 días Aptitud para principiantes 25/100
react-grid-layout/react-draggable#784 · 4 comentarios · 2 reacciones ·
-
V4.5.0 Chrome Extension Error Abierto
Dificultad 3/5 1-2 días Aptitud para principiantes 45/100
react-grid-layout/react-draggable#782 · 1 comentario ·
-
Dificultad 3/5 1-2 días Aptitud para principiantes 25/100
react-grid-layout/react-draggable#781 · 1 comentario · 2 reacciones ·
-
the new version 4.5.0 会导致系统打包报错 Abierto
Dificultad 4/5 3-5 días Aptitud para principiantes 25/100
react-grid-layout/react-draggable#780 · 8 comentarios ·
-
Dificultad 3/5 1-2 días Aptitud para principiantes 38/100
react-grid-layout/react-draggable#779 · 1 comentario · 3 reacciones ·
Todos los issues de react-grid-layout/react-draggable
Issues similares
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 88/100
HarperFast/skills#96 ·
-
[Block] Latest Posts [Type] Bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 76/100
-
Daemon passes --experimental-wasm-jspi unconditionally on Node >= 24; Node 26 rejects the flag Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
Automattic/studio#4908 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 74/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 86/100
sugarlabs/musicblocks#8847 ·