Vaadin 23 JavaScript 导入问题

Question

我有一个Java类，继承自Vaadin Div类，应该是一个cookie警告弹窗（实现尚未完成）：

//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 + "')"));
        }));
    }
}

当点击“GOT IT”按钮时，会调用一个写在“script.js”中的JS函数，该函数会对div进行动画处理，然后将其从页面中移除。

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

我的问题是：文件已成功导入，但当我测试按钮时，浏览器控制台会抛出以下错误：“未捕获引用错误：fadeOut未定义”。

我阅读了一些论坛，其中说在Vaadin 14中将 function fadeOut(target) {} 更改为 window.fadeOut = function(target) {} 可以解决问题，但感觉没有任何变化。

这是我的主要代码：

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

CookiesDiv.java文件位于pages文件夹中，而css和js模块位于各自的文件夹中。

我在网上没有找到其他相关资料，所以我有些迷茫。请问有人知道如何解决吗？

P.S. 我不知道这是否有帮助：CSS文件中大部分属性都被忽略了，但我仍然需要进行一些研究。

- Achille004

Answer 1

您的导入应该是：

@CssImport("./css/info_popup.css")
@JsModule("./js/script.js")

- Simon Martinelli

---

将路径添加“./”会导致模块解析错误。 我已经将主树添加到问题中。 - Achille004

PS：正如您所看到的，不使用“./”也应该可以工作，事实上，我尝试在JavaScript文件中编写了这个简单的函数window.testCall = function() { window.alert('Works!') }，并且没有出现错误。 - Achille004

文件必须位于<项目根目录>/frontend/css或js中。 - Simon Martinelli

它可以工作，谢谢。还有最后一件事，如果我想保持我的CSS和JS文件夹与以前一样，我是否必须每次都写完整路径，或者有没有一种更简单的方法，也许是通过某些应用程序属性或类似的东西？ - Achille004

这是不可行的。你必须遵循 Vaadin 的目录结构。一旦你使用了主题，它也将进入前端文件夹。 - Simon Martinelli