React.lazy(() => import('react-draggable')) fails TypeScript: typeof Draggable is not assignable to ComponentType
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 72/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 活発
- 技術スタック
- javascript, react, typescript
- 領域
- frontend
調査の方向性
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.
索引モデルが issue の本文から書いたものです。
説明
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.- 主要言語
- JavaScript
- スター
- 9.3k
- フォーク
- 1k
- 平均マージ
- 3日 8時間
- マージ済み PR(30日)
- 4
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
react-grid-layout/react-draggable のほかの issue
-
難易度 4/5 3〜5日 初心者へのやさしさ 25/100
react-grid-layout/react-draggable#784 · コメント 4 件 · リアクション 2 件 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 45/100
react-grid-layout/react-draggable#782 · コメント 1 件 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 25/100
react-grid-layout/react-draggable#781 · コメント 1 件 · リアクション 2 件 ·
-
難易度 4/5 3〜5日 初心者へのやさしさ 25/100
react-grid-layout/react-draggable#780 · コメント 8 件 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 38/100
react-grid-layout/react-draggable#779 · コメント 1 件 · リアクション 3 件 ·
react-grid-layout/react-draggable の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
HarperFast/skills#96 ·
-
[Block] Latest Posts [Type] Bug
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
Automattic/studio#4908 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 86/100
sugarlabs/musicblocks#8847 ·