How to use JavaScript to build a simple new Component in Java for Vaadin

Question

I worked with Vaadin before but could not figure out how to build my own Vaadin components with JavaScript from scratch. Then I did some work with Perl, Mojolicious, JavaScript, HTML and building my HTML+JavaScript components worked like a charm.

Now I am back to Vaadin 24.7.6, Java 21, Maven, and JavaScript.

I downloaded a Vaadin+Springboot example project an am trying to add JavaScript to it. I followed a Vaadin tutorial but I keep getting an error.

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JavaScript;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.dom.Element;

//@JavaScript("keyboard-german.js")
//@Tag("cerebrummi_keyboard")
//@JsModule("keyboard-german.js")
public abstract class Keyboard extends Component {
   private static final long serialVersionUID = -4476014165075742457L;

   public Keyboard() {}

   public Keyboard(Element element) {
      super(element);
   }
}

Each of the tags results in the same error:

error during build: [31m[vite]: Rollup failed to resolve import "keyboard-german.js" from "C:/Users/.../generated-flow-imports.js". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to 'build.rollupOptions.external'

Where do I find 'build.rollupOptions.external'? I searched the web, but could not find an answer.

The JavaScript file is just simple right now:

<script type="module">
export var cerebrummi_keyboard = "This will become the keyboard";
</script>

The .js file was at first next to the Keyboard.java file. Later I moved it to the root of the project. I also changed vite.config.ts but could not find a solution, though reading in the vite handbook online.

---

Update

How to make Vaadin and JavaScript, HTML interact? It is not just about where to place the JavaScript file. How must the JavaScript file look like, which tags to use in Vaadin?

Update 2

The reason I am asking this question is that I would like to create new Vaadin components for others and me to use, like a keyboard with Hebrew characters.

I did so in Java Swing to create the vocabulary trainer "Cerebrummi" (freeware) and am thinking about coding a web app with a similar design. You can see screenshots of Cerebrummi including the keyboard at:

screenshots of what I want to create

Update 3

Thank you, I got it right now, where to place the JavaScript file and use a tag to include it.

Also, I have been looking at the link to GitHub with the examples and picked the spinwheel example. Unfortunately the example uses a library and is quite complex. Would it be possible to add an example without using a library and just creating a simple HTML button with JS click handler as a new Vaadin component. (I know there are buttons in Vaadin, but I want to learn how to do one myself.)

Answer 1

Your JS file is most likely in wrong directory and don't get included into front-end bundle. Project root or next to Java files don't work (at least without special configuration). src/main/frontend/ or src/main/resources/META-INF/resources/frontend/ (for add-ons) are good candidates. Locations are covered in the JavaDocs, but I often end up checking out documentation page for a summary.

PS. I assume your JS file don't contain the html tags, but only the actual JS 🤓 In trivial cases an easy option can be to dump that tag as such

Answer 2

This blogpost shows you different ways of integrating external components. You haven't provided a full example of what you're trying to do and use, but it looks like you should most likely go with the "JavaScript-based component/widget" approach. TL;DR: create a JavaScript "connector", link it to your Java component with @JsModule([filename]) and use getElement().executeJs or getElement().callJsFunction to call JavaScript from Java (hint: those calls can also handle return values). Demo app source here: https://github.com/SebastianKuehnau/Component-Integration-Demo-App