Updating from 14.0.15 to 14.1.x caused JsModule to stop working - JavaScrip

In my 14.0.15, my app works fine with the following:

@JsModule("./js/addBeforeUnloadListener.js")
@JsModule("./js/logToConsole.js")

Inside the contrustror of this root element, I have:

	currentUI = UI.getCurrent();
	currentUI.addDetachListener(e->onDetach(e));
	currentUI.getPage().executeJs("addBeforeUnloadListener($0)", this.getElement());

And then this public method calls logToConsole:

	public static void logToConsole( Element element, String message ) {
		element.executeJs("logToConsole($0)", message );	
	}

![Project Structure with javascript]
(https://i.postimg.cc/VNnY7yZh/JSProblem-Project-Structure.png)

Figure 1: Project Structure

But when I updated to 14.1.0 and 14.1.1, I get “logToConsole is not defined” and “addBeforeUnloadListener is not defined”. I switch back to 14.0.15, and the error goes away. Then I switch back to 14.1.0 or 14.1.1 branch, and I get the error. Did something change with JavaScript handling in 14.1.x? I see nothing in the update documents, but maybe I missed something? I am litterally switching between two branches that only differ in respect to the version of Vaadin being used, my source code does not change between these two versions.

![LogToConsoleError]
(https://i.postimg.cc/P5CkGw4m/log-To-Console-Not-Defined.png)

Figure 2: Log To Console error

![addBeforeUnloadListenerError]
(https://i.postimg.cc/mrWpdz6Z/add-Before-Unload-Listener-Not-Defined.png)

Figure 3: Add before unload listener error

NOTE: I have a Vaadin 7 app wrapped inside MPR. I use hardly any Flow components, at this point. In fact, most of my flow logic is limited to the entry point ( class with @Route("") ).

NOTE 2: So far the only problem is this “not defined” issue.

I have the same problem with @Javascript(), javascript file is not loaded when switched from Vaadin 14.0.4 to 14.1.2.
I’ve opened new issue: https://github.com/vaadin/flow/issues/7129

Hi Anthony. We’ve seen some similar reports, and normally removing:

  • package-lock.json & package.json
  • /node_modules & /target
    should help. Alternatively you can try running npm ddp.

But, unfortunately there are some weird situations where neither of the above have helped, and we’re looking into this. This is a related issue https://github.com/vaadin/flow/issues/7000

Regarding my problem, I’ve just tried:

  • delete node_modules folder, package.json and package-lock.json
  • execute “mvn clean process-resources”
  • run project from within IDE (vaadin.productionMode=false)

Application starts as expected, but javascript files specified with @Javascript() on custom components are not loaded.
My current workaround is to put: UI.getCurrent().getPage().addJavaScript(); in my custom component’s constructor. Using this, javascript file is loaded as expected (with 14.1.2).

Pekka Hyvönen:
Hi Anthony. We’ve seen some similar reports, and normally removing:

  • package-lock.json & package.json
  • /node_modules & /target
    should help. Alternatively you can try running npm ddp.

But, unfortunately there are some weird situations where neither of the above have helped, and we’re looking into this. This is a related issue https://github.com/vaadin/flow/issues/7000

I did try to delete package-lock.json and node_modules, as per the upgrade directions, with no effect. But I did not try deleting package.json or target. No time to try now, but I can try later.

I’ve solved my issue, the problem was in too restrictive “vaadin.whitelisted-packages” list. Some UI classes inside my jar were not specified in this list, and thus not picked up by vaadin dev updater.

Just checked and I still have the same problem with 14.1.17. I did the following:

  1. Deleted target, node_modules, package-lock.json, package.json
  2. Did build, to ensure no other strange errors. No errors after above.
  3. Since no errors, run with jetty in IDE, get above messages for my JsModule javascript stuff.
  4. Ran mvn clean process-resources and then retried in jetty, still get problems
  5. Ran mvn clean and then npm ddp, and retried jetty, still get problems

I also tried doing the below BEFORE calling executing these JavaScript modules:

		currentUI.getPage().addJsModule("/js/addBeforeUnloadListener.js");
		currentUI.getPage().addJsModule("/js/logToConsole.js");

Also tried:

@JavaScript("/js/addBeforeUnloadListener.js")
@JavaScript("/js/logToConsole.js")

and

	UI.getCurrent().addJavaScript("/js/addBeforeUnloadListener.js");
	UI.getCurrent().addJavaScript("/js/logToConsole.js");

So any other ideas?

Frontend components scanning was changed in 14.1. Have you checked that your component (in which you placed @ JsModule() annotation) matches packages defined in your whitelist (if you use one)?

vaadin.whitelisted-packages = com/yourpackage

Where would this be found? I looked for “whitelisted” in all my files and found nothing. My app is NOT a Spring app. When I researched your answer this past weekened, I saw this connected to Spring, so I just assumed it did not apply to me since I am not using Spring. Am I missing something?

Also, you mention “frontend components”, but my javascript has nothing to do with components. It is just javascript I want to call, nothing else.

By “frontend components” I mean Component class that contains your @ Javascript() annotaton and all other Vaadin components in your application).

Unfortunately, I’ve never used Vaadin in plain Java servlet application, so I can’t help you further…

I missunderstood the migration instructions [here]
(https://vaadin.com/docs/v14/flow/v14-migration/v14-migration-guide.html#4-update-java-annotations), but the example in the Ulrick conversation later on, and the referenced file https://github.com/jcgueriaud1/sortable-layout/blob/master/sortable-layout/src/main/java/org/vaadin/jchristophe/SortableLayout.java, helped me find the problem: just needed to add “frontend” protocol.

I fixed it by using this code:

@JavaScript("frontend://js/addBeforeUnloadListener.js")
@JavaScript("frontend://js/logToConsole.js")