Import error on an react-flow addon tsx definition

Flow
1

I’m trying to create a new flow addon with react support. I understand that if I want to include my .tsx file inside my addon (jar file), the .tsx file should go in src/main/META-INF/resources/frontend location. The problem is that in VSCode and Eclipse I’m getting the following import error (if I start the application it works fine):

image
image1792×360 47.6 KB

I can fix the error by replacing the import to:

import {ReactAdapterElement, type RenderHooks} from "../../../../frontend/generated/flow/ReactAdapter";

But I think that then it won’t work if I try to use the addon from an actual project as a dependency.

Which should be the correct import declaration so both the IDE and the addon work fine?

1 Like
2

Personally, I don’t think that there is already a solution available… I would suggest to change your add-on structure to look more like a real flow project with a frontend folder and use a maven plugin to move your typescript / react code into the meta inf folder once you package it.

3

What I see that is a little bit “strange” is that in the tsconfig.json there is this configuration that seems relevant:

"paths": {
  "@vaadin/flow-frontend": ["generated/jar-resources"],
  "@vaadin/flow-frontend/*": ["generated/jar-resources/*"],
  "Frontend/*": ["*"]
}

For some reason it seems that VSCode is not taking that into account.

4

Is there any way to get some kind of IDE support on this? All .tsx files look completely broken because of this and they are hard to develop.

5

Hi @mmlopez,
I like the idea of ​​a React Flow addon.
Are you still working on it? Are the sources available?
Thx

6

Hi Andre. Please take a look at this post. There you can find all the information about the work we did on creating Vaadin add-ons integrating React components. Currently we have 3 add-ons integrating React components that you can find at Vaadin’s directory:

1 Like
7

Thank you @paola.debartolo