search

xyflow / xyflow

React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.
https://xyflow.com
MIT License
25.92k stars 1.66k forks source link

The “Handle” only indicates the type, but is used here as a value. #4602

Closed linyuling520 closed 1 month ago

linyuling520 commented 2 months ago

What platform were you using when you found the bug?

Live code example

No response

Describe the Bug

In my custom node, the Handle component is used, but it exports as a type.

`

import { NodeProps, Position, Handle } from '@xyflow/react';
<Handle
        type="target"
        position={targetPosition as Position}
        isConnectable={isConnectable}
        style={{
          backgroundColor: '#4d53e8',
          width: 10,
          height: 10,
        }}
      />

`

Steps to reproduce the bug or issue

I checked the source code and found that the exported type and the Handle component were renamed, and that the later exported type overwrote the component. reactflow-1 reactflow-2 reactflow-3

Expected behavior

Expect to be able to export Handle components properly.

Screenshots or Videos

No response

Additional context

No response

moklick commented 2 months ago

How does your dev setup look like? It's allowed to export a type and value (a component in this case) with the same name in TS.

moklick commented 2 months ago

Which TS version are you using @linyuling520 ?

tswistak commented 2 months ago

I had the same problem in an old project with TypeScript 4.7.3. Upgrading to TypeScript 5.6.2 resolved it.