Vaadin 14 transitive NPM dependencies - spring-boot

Question

I'm in the process of switching my Spring Boot + Vaadin application from Vaadin 14 in "Vaadin 13 compatibility mode" to "native Vaadin 14 mode". This is primarily because I want to use the Vaadin Gradle Plugin in order to be able to enable production mode. This also requires upgrading from Full Calendar web component to Full Calendar 4 web component, which now supports Vaadin 14+ and also wraps a newer version of FullCalendar. So lots of things needing to happen at the same time unfortunately.
The issue I'm now having, is that when the FullCalendar component is shown, I get this client-side error:
(ReferenceError) : moment is not defined
I see that the FullCalendar web component jar has these annotations on the FullCalendar class in the org.vaadin.stefan.fullcalendar package:
#NpmPackage(value = "moment", version = "2.24.0")
#NpmPackage(value = "moment-timezone", version = "0.5.28")
#NpmPackage(value = "#fullcalendar/moment", version = "4.4.0")
#NpmPackage(value = "#fullcalendar/moment-timezone", version = "4.4.0")
The reason that the first two are listed here is probably because they are defined as peer dependencies of the last two, so they are not installed automatically.
I also noticed that the FullCalendar 4 web component page mentions the following known issue:
Build problems / JS (client side) errors (V14+)
It might be, that the transitive dependencies are not resolved correctly.
If you are using Spring Boot please add the #EnableVaadin annotation to your application class. Add the package org.vaadin.stefan plus your root package as parameters. This should enable Spring to analyze all npm dependencies at runtime. Other CDI version should work the same.
So I've added this annotation to my application class:
#SpringBootApplication
#EnableVaadin({"org.vaadin.stefan", "com.mypackage"})
public class MyApplication {
But this doesn't seem to work.
I've also tried running the gradle task vaadinBuildFrontend instead of just vaadinPrepareFrontend, but that didn't make a difference.
What else should I do to make sure moment is loaded and initialized properly?
UPDATE: if I explicitly enable vaadin.productionMode in build.gradle, then the error is gone. Of course, I want to be able to run the application in development mode as well.
UPDATE 2: I've experimented with creating a clean Vaadin + Spring Boot + Gradle project from the provided base project. I noticed one difference: in my own application I get a warning logged:
dev-updater : Couldn't find dev dependencies file. Dev dependencies won't be locked
... which I don't get in the clean project. I get the following logging lines there which I don't get in my own project:
dev-updater : Visited 88 classes. Took 16 ms.
dev-updater : Skipping `pnpm install` because the frontend packages are already installed...
dev-updater : Copying frontend resources from jar files ...
dev-updater : Visited 13 resources. Took 84 ms.```
UDPATE 3: I found out that the moment() function is actually called from code that is executed using calendar.getElement().executeJs(...). Apparently the function is not known in that scope. Maybe due to strict mode? Not sure if that explains why it works in production mode.

Answer 1

I haven't used gradle with V14, so I cannot tell for sure, if it is maybe a gradle related reason or a Vaadin / addon issue. I just can tell, that I at least tried to setup a new project last week with the addon and it worked out of the box, so I assume, there are some tricky details burried somewhere.
Let's start with some usual question:
I assume, you use V14.3.x?
Has the moments library been downloaded (see project root > node_modules/moment and ./moment-timezone)? If not, is it listed in the package.json file?
Have you encountered this problem also with the clean Vaadin project?
And, not that I ask you to use it instead, but just for test purposes - have you tried the same setup with maven instead of gradle?
How are you using the calendar in Java. Can you show some example code of the implementation?

Answer 2

I was able to work around the issue because moment was used to create a parseable date string, but (at least the current version of) the library supports the ISO format returned by LocalDate#toString.
As I suspected, due to strict mode, the variable is not declared in global scope and therefore can't be used in executeJs. If it is necessary to do so, one needs to create a javascript file that adds the variable to window, and import that file using #JsModule. Then the variable in the window object can be used from executeJs.
See https://vaadin.com/forum/thread/17832455/how-to-use-external-javascript-libraries-correct-in-vaadin-14-npm and https://vaadin.com/forum/thread/17753553/can-t-use-frontend-js-with-vaadin-14.