question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[reactive-element] Type 'Component' is not assignable to type 'ReactiveElement'. Types have separate declarations of a private property '__instanceProperties'.

See original GitHub issue

Which package(s) are affected?

Lit Core (lit / lit-html / lit-element / reactive-element)

Description

With lit@2.2.8 lit decorators works as expected, but if I wanted to upgrade to 2.3.0 or above I get this typescript error:

component.ts: error TS2345: Argument of type 'Component' is not assignable to parameter of type 'ReactiveElement | ClassElement'.
  Type 'Component' is not assignable to type 'ReactiveElement'.
    Types have separate declarations of a private property '__instanceProperties'.

Component code:

export class Component extends LitElement {
	@query('[part="feedback"]') readonly $feedback!: HTMLElement;
	...
}

image

Reproduction

I didn’t had time to create a reproduction repo, but if it’s needed I can make.

We use the following tsconfig.json compilerOptions:

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es2018",
    "module": "esnext",
    "moduleResolution": "node",
    "declaration": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "useDefineForClassFields": false,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts"
  ]
}

Workaround

Workaround is to use 2.2.x version

Is this a regression?

Yes. This used to work, but now it doesn’t.

Affected versions

Failing since 2.3.0, worked in 2.2.8

Browser/OS/Node environment

node: 16.15.1 typescript: 4.7.4 OS: macOS 12.5

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:2
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
SketchBookkeepercommented, Aug 25, 2022

I ran npm dedupe which fixed the issue.

1reaction
stefanholzapfelcommented, Sep 14, 2022

@augustjk I also experience that issue. In my case I can see another version of reactive-element which comes from using shoelace.style@2.0.0-beta.82 and @lit-labs/motion@1.0.3

Read more comments on GitHub >

github_iconTop Results From Across the Web

Types have separate declarations of a private property
In the abstract base class the constructor parameter still can be declared as private readonly , but the derived type does need to...
Read more >
Types have separate declarations of a private property in TS
To solve the error "Types have separate declarations of a private property", remove the private visibility modifier from members that have already been ......
Read more >
lit/reactive-element.ts at main - GitHub
Lit is a simple library for building fast, lightweight web components. - lit/reactive-element.ts at main · lit/lit.
Read more >
Question about error TS2415 : r/typescript - Reddit
error TS2415 : Class 'Square' incorrectly extends base class 'Rectangle'. Types have separate declarations of a private property 'x'.
Read more >
Reactivity Fundamentals - Vue.js
Declaring Reactive State #. With Options API, we use the data option to declare reactive state of a component. The option value should...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found