Having trouble with using Polymer3 and JsModule

Hi all,

I’m trying to migrate to Vaadin 14 (EDIT: RC3, and Java8) and have to migrate a component I implemented with Polymer. The migration from Polymer2 to Polymer3 worked, as I can use the code in sandboxes such as stackblitz. But when I try to use the code in my Vaadin spring-boot app, I get the following error (This is not actually using my template, but the “top-bar” provided in the [Vaadin14 migration]

There was an exception while trying to navigate to 'test' with the exception message 'Error creating bean with name 'testView' defined in file[C:\dev\workspace\sample\target\classes\js\ui\TestView.class] : Instantiation of bean failed; nested exception is org.springframework.beans.BeanInstantiationException: Failed to instantiate [js.ui.TestView] : Constructor threw exception; nested exception is java.lang.IllegalStateException: Couldn't find the definition of the element with tag 'top-bar' in any template file declared using '@JsModule' annotations. Check the availability of the template files in your WAR file or provide alternative implementation of the method getTemplateContent() which should return an element representing the content of the template file'

The project sturcture I’m using looks as follows:

  • src
    • main
      • java
        • js
          • ui
            • TestView.java
            • TopBar.java
            • TopBarModel.java
      • resources
        • META-INF
          • resources
            • frontend
              • top-bar-element.js

And My TopBar class looks as follows

package js.ui;

import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.polymertemplate.PolymerTemplate;

public class TopBar extends PolymerTemplate<TopBarModel> {

I’m guessing it’s a simple issue of putting the file in the correct place, however I just can’t figure it out.

Thanks in advance


I am also getting similar errors. I tried placing the “js” file in different locations but not succeeded.

Also, it looks like the ‘js’ file is put the proper place if it is directly used in some view (Component with Route annotation). In my case, I just created a dummy view and it started working. (Anyway, this is just a workaround and there has to be a solution for this).

I just noticed another quirk in v14

Before, if i modifed the contents of a working annotation file ie: @JsModule(“./src/views/styles.js”)
I would see the changes on Browser refresh, not now.

technically I don’t see why it doesn’t work.
Your project structure is correct.

So I see here two possible issues:

  • we have a bug
  • the content of your template is incorrect (so the parser is not able to parse the file).

Let’s check that this is not the second issue.
Could you please post here the exact content of your top-bar-element.js ?

If it’s correct then I will ask you create a ticket with the all info provided so that we may identify the reason of this behavior.

In my case, there’s no error in the JS file because I tested it separately (also, it’s a copy of the “hello world” example given at the Vaadin site).

Could you please post it here?

If you are completely sure that it’s correct then please just create a ticket.

Sure thing, here you go:

import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-button/vaadin-button.js';
import '@vaadin/vaadin-text-field/vaadin-text-field.js';

class TopBarElement extends PolymerElement {
    static get template() {
        return html`
                <vaadin-text-field id="search">
                <vaadin-button id="new">New

    static get is() {
        return 'top-bar'

customElements.define(TopBarElement.is, TopBarElement);

By the way, I also struggle with npm and webpack; I’m not really well versed with them, and I don’t know what exactly is happending, but sometimes mvn doesn’t successfully compile my project. I get the following error message:

ERROR in ../target/frontend/generated-flow-imports.js?babel-target=es5
Module not found: Error: Can't resolve '@vaadin/flow-frontend/top-bar-element.js?babel-target=es5' in 'C:\dev\workspace\problematic-js\problematic-js\target\frontend'
 @ ../target/frontend/generated-flow-imports.js?babel-target=es5 11:0-50

ERROR in ../target/frontend/generated-flow-imports.js?babel-target=es6
Module not found: Error: Can't resolve '@vaadin/flow-frontend/top-bar-element.js?babel-target=es6' in 'C:\dev\workspace\problematic-js\problematic-js\target\frontend'
 @ ../target/frontend/generated-flow-imports.js?babel-target=es6 11:0-50

which in the end results in

 Failed to execute goal com.vaadin:vaadin-maven-plugin:14.0.0.rc4:build-frontend (default) on project problematic-js: Execution default of goal com.vaadin:vaadin-maven-plugin:14.0.0.rc4:build-frontend failed: Webpack process exited with non-zero exit code.

When I get it to work, I’m not sure what exactly did it; it’s some combination of mvn clean installing, and npm installing, deleting package.json etc…

The content looks right.

Make sure you are running Spring boot project as a Jar.
In case of WAR the the frontend directory is normally should be in the root project directory (not in the resources/META-INF/resources) but I’m not sure about your project configuration.

Perhaps it’s better just create a ticket with attached project so that we are able to reproduce it and see what happens.

The last issue is a known bug. Perhaps it’s the same as https://github.com/vaadin/flow/issues/6026

Thanks for the info. I created a ticket [here]

I have created a separate issue because I am not using spring-boot and my issue is a bit different:

You mention an add-on in your issue which means you should use the same structure in fact : META-INF /resources/frontend. Not sure whether you do this.
But let’s proceed in the ticket.

Denis Anisimov:
You mention an add-on in your issue which means you should use the same structure in fact : META-INF /resources/frontend. Not sure whether you do this.
But let’s proceed in the ticket.

I tried all locations (in fact, put the same copy of the JS file in all possible locations and verified that it is there the jar file created by the add-on too).

Hi Syam,

I encounter the same issue. Did you ever had a solution for this ?


Hi Jorn,
Yes, my issue was resolved.