Vaadin24 @JavaScript path not working

Hello,

In Vaadin 24, I have a module named vaadin-base, and I want to add a JavaScript file to my component named abc in this module. I added vaadin-base as a dependency to my second project named vaadin-web. My question is: where should I place the JavaScript file in the vaadin-base module so that I can use the abc component with this JavaScript file in vaadin-web?

Here’s what I did in vaadin-base:

package a.b.c;

@Tag("abc")
@JavaScript("./frontend/abc.js")
public class abc extends Component {}

And I placed the JavaScript file at:

src/main/resources/META-INF/resources/frontend/abc.js

But it’s not working.

Remove /frontend from your JavaScript annotation.

Also make sure your package is included in Vaadin’s scanner. E.g. by using @EnableVaadin(“your.base.package”) if it doesn’t match with your application.

Take a look at the Loading Resources page in the docs for examples: Loading Resources | Advanced Topics | Vaadin Docs

Note especially that different project packaging (jar/war) means you need to use different directory structures for resources.

vaadin-base module

This worked:

src/main/resources/META-INF/resources/frontend/abc.js

@Tag("abc")
@JsModule("./abc.js")
public class abc extends Component { }

However, @CssImport is not working. How should I approach this?

src/main/java/a/b/c/SideItem.java
src/main/resources/META-INF/resources/frontend/side-item.css

@Tag("side-item")
@CssImport("./side-item.css")
public class SideItem extends Component {}

With Vaadin’s project setup, the frontend directory is for resources that will be processed by the frontend bundling tool, i.e. Vite or webpack. This is mostly TypeScript (or JavaScript) files and in some cases references that are directly referenced from those.

CSS files are on the other hand either included to the theme (through the frontend/themes directory) or used as a standalone file (through the @CssImport annotation). In your case, it should work if you move the file outside the frontend/ directory, i.e. src/main/resources/META-INF/resources/side-item.css