Missing Import

Hilla
1

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?

Example

return html`
      <div>
        <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>
      </div>
      
      <vaadin-grid .items=${this.groceryItems}>
        <vaadin-grid-column path="name"></vaadin-grid-column>
        <vaadin-grid-column path="quantity"></vaadin-grid-column>
      </vaadin-grid>
    `;
2

This renders the grid as it is defined

3

image.png

4

But it has no items

5

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

6

Thanks

7

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

8

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

9

Because the grid will not show up in the page

10

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.

11

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

12

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

13

Haha.

14

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

15

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

16

Could this be integrated?

17

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

18

I don’t use VSCode

19

With integrating I mean Vite

20

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