search

vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
http://clarity.design
MIT License
6.43k stars 762 forks source link

TS2416: Property 'updated' in type 'CdsIcon' is not assignable to the same property in base type 'LitElement'. #6654

Closed youeleven closed 2 years ago

youeleven commented 2 years ago

Describe the bug

Trying to create a clarity project by following below command

ng new hawkeye-ui cd hawkeye-ui/ ng add @clr/angular ng serve

` $ ng --version

 _                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

/ △ \ | ' \ / | | | | |/ _ | '| | | | | | | / _ | | | | (| | || | | (| | | | || |_ | | // __| ||_, |_,||_,|| __|__|| |/

Angular CLI: 13.2.0 Node: 16.13.2 Package Manager: npm 8.1.2 OS: darwin x64

Angular: ...

Package Version

@angular-devkit/architect 0.1302.0 (cli-only) @angular-devkit/core 13.2.0 (cli-only) @angular-devkit/schematics 13.2.0 (cli-only) @schematics/angular 13.2.0 (cli-only)

$ ng new demo-ui ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ] CREATE demo-ui/README.md (1055 bytes) CREATE demo-ui/.editorconfig (274 bytes) CREATE demo-ui/.gitignore (548 bytes) CREATE demo-ui/angular.json (3231 bytes) CREATE demo-ui/package.json (1073 bytes) CREATE demo-ui/tsconfig.json (863 bytes) CREATE demo-ui/.browserslistrc (600 bytes) CREATE demo-ui/karma.conf.js (1427 bytes) CREATE demo-ui/tsconfig.app.json (287 bytes) CREATE demo-ui/tsconfig.spec.json (333 bytes) CREATE demo-ui/.vscode/extensions.json (130 bytes) CREATE demo-ui/.vscode/launch.json (474 bytes) CREATE demo-ui/.vscode/tasks.json (938 bytes) CREATE demo-ui/src/favicon.ico (948 bytes) CREATE demo-ui/src/index.html (295 bytes) CREATE demo-ui/src/main.ts (372 bytes) CREATE demo-ui/src/polyfills.ts (2338 bytes) CREATE demo-ui/src/styles.scss (80 bytes) CREATE demo-ui/src/test.ts (745 bytes) CREATE demo-ui/src/assets/.gitkeep (0 bytes) CREATE demo-ui/src/environments/environment.prod.ts (51 bytes) CREATE demo-ui/src/environments/environment.ts (658 bytes) CREATE demo-ui/src/app/app-routing.module.ts (245 bytes) CREATE demo-ui/src/app/app.module.ts (393 bytes) CREATE demo-ui/src/app/app.component.scss (0 bytes) CREATE demo-ui/src/app/app.component.html (23364 bytes) CREATE demo-ui/src/app/app.component.spec.ts (1085 bytes) CREATE demo-ui/src/app/app.component.ts (215 bytes) ✔ Packages installed successfully. hint: Using 'master' as the name for the initial branch. This default branch name hint: is subject to change. To configure the initial branch name to use in all hint: of your new repositories, which will suppress this warning, call: hint: hint: git config --global init.defaultBranch hint: hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and hint: 'development'. The just-created branch can be renamed via this command: hint: hint: git branch -m Successfully initialized git. unegi-a01:demo unegi$ cd demo-ui/ unegi-a01:demo-ui unegi$ ng add @clr/angular ℹ Using package manager: npm ✔ Found compatible package version: @clr/angular@13.0.1. ✔ Package information loaded.

The package @clr/angular@13.0.1 will be installed and executed. Would you like to proceed? Yes ✔ Package successfully installed. UPDATE package.json (1154 bytes) UPDATE angular.json (3283 bytes) UPDATE src/app/app.module.ts (567 bytes) ✔ Packages installed successfully. unegi-a01:demo-ui unegi$ ng serve ✔ Browser application bundle generation complete.

Initial Chunk Files | Names | Raw Size vendor.js | vendor | 4.39 MB | styles.css, styles.js | styles | 736.47 kB | polyfills.js | polyfills | 299.91 kB | main.js | main | 53.81 kB | runtime.js | runtime | 6.52 kB | 

                  | Initial Total |   5.46 MB

Build at: 2022-02-08T10:18:54.550Z - Hash: 0a2bb2d52a0fca55 - Time: 19649ms

Error: node_modules/@cds/core/icon/icon.element.d.ts:91:5 - error TS2416: Property 'updated' in type 'CdsIcon' is not assignable to the same property in base type 'LitElement'. Type '(props: Map<string, any>) => void' is not assignable to type '(_changedProperties: PropertyValues) => void'. Types of parameters 'props' and '_changedProperties' are incompatible. Type 'PropertyValues' is not assignable to type 'Map<string, any>'.

91 updated(props: Map<string, any>): void;


Error: node_modules/@cds/core/icon/icon.element.d.ts:92:5 - error TS2416: Property 'firstUpdated' in type 'CdsIcon' is not assignable to the same property in base type 'LitElement'.
  Type '(props: Map<string, any>) => void' is not assignable to type '(_changedProperties: PropertyValues<any>) => void'.
    Types of parameters 'props' and '_changedProperties' are incompatible.
      Type 'PropertyValues<any>' is not assignable to type 'Map<string, any>'.

92     firstUpdated(props: Map<string, any>): void;

Error: node_modules/@cds/core/internal/base/button.base.d.ts:19:15 - error TS2416: Property 'updated' in type 'CdsBaseButton' is not assignable to the same property in base type 'LitElement'. Type '(props: Map<string, any>) => void' is not assignable to type '(_changedProperties: PropertyValues) => void'. Types of parameters 'props' and '_changedProperties' are incompatible. Type 'PropertyValues' is not assignable to type 'Map<string, any>'. Types of property 'forEach' are incompatible. Type '(callbackfn: <K extends string | number | symbol>(value: any, key: K, map: Map<K, any>) => void, thisArg?: unknown) => void' is not assignable to type '(callbackfn: (value: any, key: string, map: Map<string, any>) => void, thisArg?: any) => void'. Types of parameters 'callbackfn' and 'callbackfn' are incompatible. Types of parameters 'key' and 'key' are incompatible. Type 'K' is not assignable to type 'string'. Type 'string | number | symbol' is not assignable to type 'string'. Type 'number' is not assignable to type 'string'.

19 protected updated(props: Map<string, any>): void;



** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

✖ Failed to compile.
`
arjunckm commented 2 years ago

Same Issue we are also facing from today when we updated with npm install

Error: node_modules/@cds/core/icon/icon.element.d.ts:91:5 - error TS2416: Property 'updated' in type 'CdsIcon' is not assignable to the same property in base type 'LitElement'. Type '(props: Map<string, any>) => void' is not assignable to type '(_changedProperties: PropertyValues) => void'. Types of parameters 'props' and '_changedProperties' are incompatible. Type 'PropertyValues' is not assignable to type 'Map<string, any>'.

91 updated(props: Map<string, any>): void;


Error: node_modules/@cds/core/icon/icon.element.d.ts:92:5 - error TS2416: Property 'firstUpdated' in type 'CdsIcon' is not assignable to the same property in base type 'LitElement'.
  Type '(props: Map<string, any>) => void' is not assignable to type '(_changedProperties: PropertyValues<any>) => void'.
    Types of parameters 'props' and '_changedProperties' are incompatible.
      Type 'PropertyValues<any>' is not assignable to type 'Map<string, any>'.

92     firstUpdated(props: Map<string, any>): void;

Error: node_modules/@cds/core/internal/base/button.base.d.ts:19:15 - error TS2416: Property 'updated' in type 'CdsBaseButton' is not assignable to the same property in base type 'LitElement'. Type '(props: Map<string, any>) => void' is not assignable to type '(_changedProperties: PropertyValues) => void'. Types of parameters 'props' and '_changedProperties' are incompatible. Type 'PropertyValues' is not assignable to type 'Map<string, any>'. Types of property 'forEach' are incompatible. Type '(callbackfn: <K extends string | number | symbol>(value: any, key: K, map: Map<K, any>) => void, thisArg?: unknown) => void' is not assignable to type '(callbackfn: (value: any, key: string, map: Map<string, any>) => void, thisArg?: any) => void'. Types of parameters 'callbackfn' and 'callbackfn' are incompatible. Types of parameters 'key' and 'key' are incompatible. Type 'K' is not assignable to type 'string'. Type 'string | number | symbol' is not assignable to type 'string'. Type 'number' is not assignable to type 'string'.

19 protected updated(props: Map<string, any>): void;

thojo commented 2 years ago

It's caused by a breaking change in version 1.2.2 of @lit/reactive-element from lit/lit#2482.

As a workaround you can temporary downgrade @lit/reactive-element to version 1.2.1: npm install @lit/reactive-element@<1.2.2

coryrylan commented 2 years ago

The patch for this issue will go out in the next release. Until then the workaround @thojo posted should be used

AlexKuturkin commented 2 years ago

how to reduce the dependency of a @lit/reactive-element if he is not in the package.json ? cds/core is in

rameshkrishnan commented 2 years ago

in the package.json, we can add new section

"resolutions": {
    "@lit/reactive-element": "1.2.1"
}

and continue with npm install or yarn install.

AlexKuturkin commented 2 years ago

@peterblazejewicz , tnanks a lot!

github-actions[bot] commented 2 years ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.