Recently my project has stopped rendering the html content of some Polymer template html components. Some of these components were working last week and I added a new one a few days ago and since then all of them have stopped working. There are no web console errors, no Java console errors or exceptions. When I use the web developer inspect element in Chrome/Edge the tag for the component is rendered, but there is no content in the tag. Most of these are simple html displays of data, simple tables. My pom.xml is using Vaadin 14.1.2. I haven’t tried building a .war in Production mode, I’ve just been running it in the embedded Jetty server. Any suggestions would be great. I can add code samples or configuration information if that will help.
There are no web console errors, no Java console errors or exceptions.
Are you sure? The most common reason for this kind of behavior is that there is JavaScript execution error when the components are being registered. If the error happens right in the start the rest of the components are not registed, thus you would see the tag in DOM, but it wont render as browser do not have representation for the custom tag.
With Old version like 14.1.2, there was bugs in the build process, which made possible to transitive duplicates to be registered. There are many components that use some common sub-elements like vaadin-overlay and they usually have dependency to different versions. Build process should resolve the dependency to the newest used version, and there was issues in that. If you update your version to 14.4.1, you should get rid of that problem.
I went back and double checked, and sure enough as the page loaded there was a Javascript error in the web console. I overlooked the error in the .js file, where I did not name the class correctly.
I had:
/**
* What we are creating here is a layout table for the AppStatusObject Object.
*/
import {PolymerElement,html} from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-lumo-styles/icons.js';
class StatusTable extends PolymerElement {
static get template() {
return html`
<style>
:host {
/* Styles for the <my-view>
hosting element */
display: block;
}
</style>
<table border="1" cellpadding="3" cellspacing="2">
<caption>Application Status</caption>
<tr>
<th>App Name</th>
<th>Status</th>
<th>Target</th>
<th>Last Checked</th>
</tr>
<template is="dom-repeat" items="[[records]
]">
<tr>
<td>[[item.appName]
]</td>
<td>[[item.appStatus]
]</td>
<td>[[item.appTarget]
]</td>
<td>[[item.appLastChecked]
]</td>
</tr>
</template>
</table>
`;
}
static get is() {
return 'app-status-table';
}
}
customElements.define(AppStatusTable.is, AppStatusTable);
And what I did was correct the class name to: AppStatusTable. I will get the latest 14.4.1 version as well. Thank you for pointing me back to the web console. Out of curiousity, why did the problem cascade through all of the template .js files?
Out of curiousity, why did the problem cascade through all of the template .js files?
In Vaadin 14+ we use npm and webpack to collect all frontend files to one frontend bundle / widgetset, that contains the whole frontend. At the bootstrap this bundle is loaded and JavaScript execution started. Components are then registered in sequential order before app execution starts. Hence if JavaScript error cascades if it happens in this early phase.