Import JavaScript Dependency not working

Flow
1

Hey guys,

i’m struggling with the import of a js-dependency. I want the js-file to be added only for a component, so i have added the annotation in the component class.

@JavaScript("script/myGridScript.js")
public class MyGrid extends Grid<MyEntity> {
}

In debug mode (locally) this works just fine, and my script got loaded and executed. But in production mode it is not working.
I build a war file and deploy it to a tomcat. My Script file is included in the frontend folder, but not in the es5 or es6 folders.
In the sources it is located at “src/main/webapp/frontend/script/myGridScript.js”.
I have tried the following possabilities:

  • @JavaScript(“script/myGridScript.js”) => The browser does not even try to load the script file (nothing appears in the network-section)
  • @JavaScript(“/script/myGridScript.js”) => loaded from localhost/frontend/script but the app-path of tomcat is ignored (localhost/myapp/frontend…), so it is not working
  • @JavaScript(“/frontend/script/myGridScript.js”) => Warning in the install process => The translated URL ‘/frontend/script/myGridScript.js’ has no corresponding file on the filesystem, the file is addressed by path=‘\target\frontend\frontend\script\myGridScript.js’
  • @JavaScript(“frontend/script/myGridScript.js”) => Error in the install process => An import that ends with ‘frontend/script/myGridScript.js’ cannot be resolved: the corresponding file ‘\target\frontend\frontend\script\myGridScript.js’ was not found.
  • @JavaScript(“frontend://script/myGridScript.js”) => Same as “script/myGridScript.js”, the browser does not even try to load.
  • @JavaScript(“context://frontend/script/myGridScript.js”) => Warning in the install process => The translated URL ‘context://frontend/script/myGridScript.js’ has no corresponding file on the filesystem, the file is addressed by path=‘\target\frontend\context:\frontend\script\myGridScript.js’

I also have tried all this with @HtmlImport and an html-file which includes the script.

The only solution that i found until now is this code in the constructor:

UI.getCurrent().getPage().addJavaScript("../frontend/script/myGridScript.js");

but this will lead to a url for the script like this => localhost/myApp/frontent-es6/…/frontend/script/myGridScript.js which is not really nice, i think.

Maybe on of you can help with this one.
Greetings
Markus

2

Hey,

i found the solution by myself, but don’t know why exactly. To be honest if have tried the “context://…” path yesterday only with HtmlImport. Maybe there was a typo or something else, but now i have tried it again with @JavaScript and now it works.

@JavaScript("context://frontend/script/myGridScript.js")
public class MyGrid extends Grid<MyEntity> {
}

Maybe this one helps others with the same problem.