typescriptlit-elementlit

What is this typescript error when using lit context?

I am using @lit-labs/context v0.3.3 and typescript v4.7.4 with experimentalDecorators support enabled. I have this custom element using lit context:

class MyComponent extends LitElement {
  @consume({ context: loggedInContext })
  @property({ attribute: false })
  loggedIn: Boolean = false;
}

The context is working as expected, however I am getting the following typescript error just for the @consume line:

Unable to resolve signature of property decorator when called as an expression.
  Argument of type 'MyComponent' is not assignable to parameter of type 'ReactiveElement'.
    Types have separate declarations of a private property '__instanceProperties'.ts(1240)

The other decorators have no such issue. Why am I seeing this error just for the @consume decorator?

Solution

  • This is due to TypeScript doing nominal typing for classes with private properties. You likely have multiple versions of @lit/reactive-element in your project.

    Try npm ls @lit/reactive-element to see what versions you have installed from what dependencies and npm dedupe to get just a single copy.

    Version @lit/reactive-element@1.6.2 and later should no longer have this issue so updating is another solution.