0

I have the most basic Lit code like this:

import { property } from 'lit/decorators.js';

export class MyClass extends LitElement {
  @property()
  rows = [];
}

Outside of this sample, rows has data. My code renders as expected. However TS complains property is not being used? Is there some setup I may be missing around TS and decorators? I built the project using OWC.

image showing TS error in code

Dave Stein
  • 8,653
  • 13
  • 56
  • 104
  • Aren't you supposed to import `property` from `lit-element`? See [here](https://tsplay.dev/WKOLDW). At least, that's what I did when I used Lit. – kelsny Nov 02 '22 at 20:01
  • 1
    That's not what it shows in their tutorial https://lit.dev/tutorials/reactivity/. I only have `lit` required in my package. No mention of lit-element aside from `Litelement` from `lit` – Dave Stein Nov 02 '22 at 20:12
  • I tried a fresh element with `npm init @open-wc` and could not reproduce, though looks like a lot of the versions installed by default are quite out of date. So I'd consider looking at updating the dependencies. What does your tsconfig look like? Make sure the options listed here are set https://lit.dev/docs/components/decorators/#decorators-typescript – Augustine Kim Nov 03 '22 at 23:06

1 Answers1

1

Seems Open WC is out of date. It installs typescript lint at 4.33.0 when it needs 5.*

The general solution is listed here: Eslint wong error `is defined but never used` warning in NestJs for all decorators

I updated the generated package.json to this:

"@typescript-eslint/eslint-plugin": "^5.48.0",
"@typescript-eslint/parser": "^5.48.0",

I restarted my ESLint server in VS Code and everything worked fine.

It was nearly immediately fixed via https://github.com/open-wc/open-wc/issues/2557 when I reported it.

Leaving this question up for posterity.

Dave Stein
  • 8,653
  • 13
  • 56
  • 104