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]
(https://vaadin.com/docs/v14/flow/v14-migration/v14-migration-guide.html):
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;
@Tag("top-bar")
@JsModule("./top-bar-element.js")
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.
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).
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.
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`
<div>
<vaadin-text-field id="search">
</vaadin-text-field>
<vaadin-button id="new">New
</vaadin-button>
</div>`;
}
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
[ERROR]
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…
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.
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).