Importing JavaScript - It seems the two methods of doing so cannot be combined

[markhm]

When importing JavaScript files to a Vaadin Component, as described here:

https://vaadin.com/docs/v13/flow/importing-dependencies/tutorial-importing.html,

it was noteworthy, that it does not seem possible to combine the @javascript("http://d3js.org/d3.v3.min.js) tag at class definition with loading the other JavaScript file via: page.addJavaScript("js/tree_example.js");. In this case, as I experienced, the d3 library is not loaded, or at least its contents is not accessible.

Not clear if this is a bug, but I wanted to mention it.

[juhopiirainen]

Moving the issue to the Flow team.

[caalador]

Hi.

The problem is that the page.addJavaScript is exeuted befor the @javascript as the page.add will be sent in the bootstrap response and will be added before the annotated javascript.

The correct way to use JS import is to only use one way of importing.

If you would want to use the given way of mixing then the tree_example.js should start with polling until d3 is available e.g.

 const poller = () => {
     if (d3) {
         window.alert(d3.selectAll("p").length);
     } else {
         setTimeout(poller, 10);
     }
 };

I'll close this ticket as we have nothing to do for it as both ways correctly load the external script.