Missing Import

If I use a Vaadin component in a Lit template and forget the import, there is no error, but the component is not rendered correctly.
Is there any way to check for the missing import?


return html`
        <vaadin-text-field label="Item" ${field(model.name)}></vaadin-text-field>
        <vaadin-number-field label="Quantity" ${field(model.quantity)}></vaadin-number-field>
        <vaadin-button theme="primary" @click=${this.addItem}>Add</vaadin-button>
      <vaadin-grid .items=${this.groceryItems}>
        <vaadin-grid-column path="name"></vaadin-grid-column>
        <vaadin-grid-column path="quantity"></vaadin-grid-column>

This renders the grid as it is defined


But it has no items

I don’t think so (for example this https://twitter.com/marcushellberg/status/1603123368156286976 ) but maybe someone has a solution.


When grid is defined, it creates vaadin-grid-cell-content elements even with no items set. Also you can see that it’s missing shadow root

Sure I can see it but for a beginner this is a huge problem

Because the grid will not show up in the page

Agreed. It’s a big challenge in Lit projects, and something we’re dependent on IDE/tools to catch - and they’re not doing a good job at that at the moment.

The situation is better in React as JSX is compiled, so it will actually let you know that you’re missing an import

@secure-leopard Damn :wink: Again, a point for React…


It’s certainly something that could work in Lit, but since the template there is a string, it’ll require external tooling

This could be helpful lit-analyzer/packages/lit-analyzer at master · runem/lit-analyzer · GitHub

Could this be integrated?

If you are using the lit-plugin in VS Code, you are already using that

I don’t use VSCode

With integrating I mean Vite

I’m not sure if that’s feasible or not. Maybe @flexible-kiwi has more insights into how the analyzer and vite work?