The "this" variable is undefined in js script with hotdeploy enabled

finn0s commented 1 year ago

Description of the bug

I'm using the ChartJs addon in my vaadin 24 application. When I start the application without hotdeploy enabled its works fine. But with hotdeploy i get this javascript error.

Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'moment')
    at Moment.js:10:19
    at Moment.js:11:2

The ChartJs addon includes a js script with @JsModule Annotation. This script uses the this keyword. If hotdeploy is enabled the this keyword is always undefined

I'm using hotdeploy as a workaround for another bug appeared during the migration from vaadin 23 to vaadin 24 described in #16679. @Silicat-git said he fixed the problem with enabling hotdeploy: https://github.com/vaadin/flow/issues/16679#issuecomment-1522934112

Expected behavior

I expect that the ChartJs addon works with vaadin 24 and hot deploy enabled.

Minimal reproducible example

Example: vaadin-hotdeploy.zip To enable/disable hotdeploy, set the vaadin.frontend.hotdeploy to true or false in the src/main/resources/application.properties file

Versions

Vaadin / Flow version: 24.0.5
Java version: 17
OS version: Windows 10
Browser version (if applicable): Chrome 113.0.5672.127
IDE (if applicable): Intellij

Artur- commented 1 year ago

Seems like it ships with a quite old version of Momentjs. If you upgrade it to a newer one, it works without problems

Artur- commented 1 year ago

The addon also includes a META-INF/VAADIN/config/flow-build-info.json which can interfere with the project and should be removed

tltv commented 1 year ago

Closing this as its not an issue of Flow or Vaadin platform but its caused by an add-on not maintained by Vaadin. Please consider reporting or contributing to ChartJs addon to at least upgrade to newer momentjs.

vaadin / flow