Cannot pass component as a label.

[leochoo]

Describe the Bug

My project is using React and TypeScript. I followed the example here .

I copied the code files exactly. I changed js extension to ts.

However, although it says you can also pass a React component as a label, I realized that in my project it breaks.

  {
    id: "2",
    // you can also pass a React component as a label
    data: { label: <div>Default Node</div> },
    position: { x: 100, y: 125 },
  },

Error:

Reproduction of the bug

I cannot even reproduce this properly because it fails to recognize nodes and edges.ts on code sandbox somehow... but here is a good starting point.

(It seems like sandbox can sometimes reproduce, but not exactly)

https://codesandbox.io/p/sandbox/bug-react-flow-component-label-qvvfn3?file=%2Fsrc%2FApp.tsx%3A9%2C42

What else can i try to solve this issue?

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Go to sandbox

Expected behavior

It should accept React component as a label for TypeScript.

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Edge
• Version: 123.0.2420.97 (Official build) (arm64)

Additional context

No response

[bcakmakoglu]

Not sure where exactly you got that sandbox from but there's a couple things wrong with it.

1. Missing styles for the app wrapper so the flow wouldn't show up even if there wasn't an error as you describe
2. Trying to import from edges.ts when there's only a edges.js file
3. Mixing tsx and js files (not necessarily wrong but for this sandbox demo why mix?)
4. Putting the label into "" double quotes will not render a jsx element but a literal string

Here's the sandbox corrected and no errors: https://codesandbox.io/p/sandbox/bug-react-flow-component-label-forked-fphfmn?file=%2Fsrc%2Fnodes.js%3A13%2C43

[leochoo]

@bcakmakoglu It seems like my sandbox was not synced when you checked. It should all be TypeScript files now.

1. Back to the original issue, you can see that the error is thrown when React component is passed to label.

2. The same problem persists as sandbox still fails to recognize nodes.ts and edges.ts.. but this is codesandbox issue right?

[bcakmakoglu]

Sandbox link is still the same one that I saw when I first opened it, so either you forgot to save changes or the link is wrong 😄

[leochoo]

@bcakmakoglu I updated the original question with updated screenshots! I also made sure the link is correct! Sorry for the trouble.

[moklick]

This is not an issue with React Flow. If you want to write JSX, you should use ".tsx" as a file extension instead of ".ts".

[leochoo]

Changing it to tsx and adding Node[] type indeed fixed the issue. thanks.