Can't use frontend js with Vaadin 14.

I’m trying to get [calling-java-from-javascript]
(http://vaadin.com/tutorials/calling-java-from-javascript) tutorial working in Vaadin 14rc1. I started from the spring boot from [here]
(https://vaadin.com/start/pre-release/project-base).

According to [v14-migration-guide]
(https://vaadin.com/docs/v14/flow/v14-migration/v14-migration-guide.html) I should move script.js to <PROJDIR>/frontend and I still use @JavaScript("frontend://script.js"). Doing that the file can then be found but when I try to run it with spring-boot:run then in the browser it I get (ReferenceError) : greet is not defined. Should this work or does it need to move to a different place?

It appears that script.js is not being copied to target/frontend. This works in Vaadin 13 but with script.js being in webapp/frontend.

Thank you for any help.

Hi Ross,
As mentioned in the v14 migration guide, “you should not use a frontend protocol (frontend://) in the path of your resources anymore, and add the ./ prefix to the file path.” So, your annotation should be @JavaScript(“./script.js”).

I tried that but I still run into the same issues with (ReferenceError) : greet is not defined. Any other suggestions?

Here is my simplest example showing the problem using the Plan Java starter with 14rc2.

17755083.zip (104 KB)

Try changing your function to

window.greet = function() {
    console.log("Hello");
};

That works! Thank you.

So why is this changed required for Vaadin 14? What is window a reference to? And is this changed documented anywhere? Thanks.

I will add a comment to the [Calling Java from JavaScript]
(https://vaadin.com/tutorials/calling-java-from-javascript) tutorial for anyone else who runs into the same issue.

Vaadin 14 loads your JavaScript as a JS Module, which means that it runs in strict mode. With strict mode, it’s an error to reference a variable that isn’t declared. Without strict mode, it’s treated as a global variable. When running in the browser, the top-level window object which represents the browser window (or tab) is used for storing global variables.