Import error on an react-flow addon tsx definition

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):

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

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.

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.