Tengo una clase Java que amplía la clase Vaadin Div, que debería ser una ventana emergente de advertencia de cookies (la implementación aún no está completa):

 //imports @CssImport("css/info_popup.css") @JsModule("js/script.js") @Tag("info_popup") public class CookiesDiv extends Div { public CookiesDiv() { this.setId("info_popup"); Span span = new Span("By continuing to this site, you accept the EULA and the cookies. "); span.add(new Anchor("./info", "Learn more")); this.add(span); this.add(new Button("GOT IT", event -> { Page page = UI.getCurrent().getPage(); this.getId().ifPresent(id -> page.executeJs("fadeOut('" + id + "')")); })); } }

Cuando se presiona el botón 'GOT IT', se llama a una función JS escrita en 'script.js', que anima el div y luego lo elimina de la página:

 window.fadeOut = function(target) { target.style = 'animation: fade-out 0.5s ease-out 0s forwards' setTimeout(function() { target.style = 'display: none' }, 500) }

Mi problema es: el archivo se importó con éxito, pero cuando pruebo el botón, la consola del navegador arroja el siguiente error: "Error de referencia no detectado: el desvanecimiento no está definido".

Leí algunos foros que decían que en Vaadin 14 cambiar function fadeOut(target) {} a window.fadeOut = function(target) {} funciona, pero parece que nada cambió.

Este es mi árbol principal:

 main ├───java │ └───com │ └───Achille004 │ └───FreeTransfer │ ├───backend │ │ ├───database │ │ ├───handlers │ │ └───security │ └───frontend │ ├───css │ ├───js │ ├───pages │ └───views └───resources ├───META-INF │ └───resources │ └───img ├───static └───templates

CookiesDiv.java se encuentra en páginas y los módulos css y js están en su propia carpeta.

No pude encontrar otras cosas en línea, así que estoy perdido. ¿Alguien sabe cómo arreglar?

PD: no sé si podría ayudar: la mayoría de las propiedades en el archivo CSS se ignoran, pero todavía tengo que investigar un poco al respecto.