I’m importing simple Javascript files (no js modules or polymer). There is no error when starting the application (Vaadin 14.0.3 with spring boot) and the files are appearing in the resources. But i can’t call any function in my scripts. For example I’m trying to call showAlert() from the browser console but there is always an Uncaught ReferenceError: showAlert is not defined.
navigation.js
function showAlert() {
alert('test');
}
Page
...
@JavaScript("./src/javascript/navigation.js")
public class MainLayout extends Div implements ...
I had a [similar issue]
(https://vaadin.com/forum/thread/17800495/17805403) with my .js script that I imported with @JsModule. The solution was to define the js function on the window scope, as the @JsModule made the js scoped to the element it is imported from. Maybe this now happens too with @JavaScript ?
In your case, this would be fixed (if that is indeed what’s causing the issue) by changing the .js file to be like this:
window.showAlert = function(){
alert('test');
};
Edit: another thing to look at is the location of your js files. I can see different definitions of where the @JavaScript actually expects the files to be ([this post]
(https://stackoverflow.com/a/57553974/3441504) say something different than [this here]
(https://vaadin.com/forum/thread/17800495/17805403) (same author)). Try using @JsModule instead which expects the js files to be in the same frontend folder as @CssImport which you say is working for you.
