[reactive-element] Type 'Component' is not assignable to type 'ReactiveElement'. Types have separate declarations of a private property '__instanceProperties'.
See original GitHub issueWhich 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;
...
}
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:
- Created a year ago
- Reactions:2
- Comments:11 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I ran
npm dedupe
which fixed the issue.@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