Vaadin Designer LitTemplate customElement error

Flow
1

Hi there,

I am trying to use Vaadin Designer to create a view, but the boilerplate code it creates has an error. The error is:

Module “lit-element” has no exported member customElement.

I am using Vaadin 24.3.5 with Designer 4.6.25 in IntelliJ.

I can’t figure out what I’m doing wrong.

Anybody have any insight?

import { LitElement, html, css, customElement } from 'lit-element';

@customElement('my-test-view')
export class MyTestView extends LitElement {
  static get styles() {
    return css`
      :host {
          display: block;
          height: 100%;
      }
      `;
  }

  render() {
    return html``;
  }

  // Remove this method to render the contents of this view inside Shadow DOM
  createRenderRoot() {
    return this;
  }
}

image
image982×564 54 KB

2

It has to be imported from somewhere else; see

Edit: it’s also reported in the Designer’s Github repo: Invalid import in Vaadin 10+ design template · Issue #2462 · vaadin/designer · GitHub

3

Yes, it is good to know that Vaadin 14 uses older (version 1) of Lit-dependency than Vaadin 24 (version 3)

4

Thanks for the fix suggestion. I would try it, but I updated my IntelliJ to the latest version and now the Vaadin Designer plugin doesn’t work at all. Guess I’m stuck waiting for a plugin update before trying it out.

Does anyone know if Vaadin Designer still a serious product?