error TS2428: All declarations of 'PluginOptionsByType' must have identical type parameters.

[saravanapriyanm]

Importing in angular component throws the following error:

Error: node_modules/chart.js/dist/types/index.d.ts:2794:18 - error TS2428: All declarations of 'PluginOptionsByType' must have identical type parameters.

2794 export interface PluginOptionsByType<TType extends ChartType> {
                      ~~~~~~~~~~~~~~~~~~~


Error: node_modules/chart.js/dist/types/index.d.ts:2804:12 - error TS2314: Generic type 'PluginOptionsByType<TType, TType>' requires 2 type argument(s).

2804   plugins: PluginOptionsByType<TType>;
                ~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/chartjs-plugin-annotation/types/index.d.ts:6:13 - error TS2428: All declarations of 'PluginOptionsByType' must have identical type parameters.

6   interface PluginOptionsByType<TType extends ChartType> {

DEPENDENCIES:

{
    "@angular-slider/ngx-slider": "^2.0.3",
    "@angular/animations": "^14.2.6",
    "@angular/cdk": "^11.2.13",
    "@angular/common": "^14.2.6",
    "@angular/compiler": "^14.2.6",
    "@angular/core": "^14.2.6",
    "@angular/elements": "^14.2.6",
    "@angular/forms": "^14.2.6",
    "@angular/platform-browser": "^14.2.6",
    "@angular/platform-browser-dynamic": "^14.2.6",
    "@angular/router": "^14.2.6",
    "@angular/service-worker": "^14.2.6",
    "@asymmetrik/ngx-leaflet": "^8.1.0",
    "@formio/angular": "^5.1.0",
    "@fortawesome/fontawesome-free": "^6.2.0",
    "@microsoft/applicationinsights-web": "^2.8.9",
    "@ng-bootstrap/ng-bootstrap": "^13.1.1",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@popperjs/core": "^2.11.6",
    "@types/d3": "^7.1.0",
    "angular-2-dropdown-multiselect": "^1.9.0",
    "apollo-angular": "^2.4.0",
    "billboard.js": "^3.4.0",
    "bootstrap": "^4.6.2",
    "buffer": "^6.0.3",
    "chart.js": "^4.2.1",
    "chartjs-chart-treemap": "^2.3.0",
    "chartjs-plugin-annotation": "^2.1.2",
    "chartjs-plugin-datalabels": "^2.2.0",
    "core-js": "^3.10.1",
    "d3": "^7.4.4",
    "d3-tip": "^0.9.1",
    "feature-toggle": "^0.3.1",
    "formiojs": "^4.13.0",
    "graphql": "^15.5.0",
    "graphql-tag": "^2.12.4",
    "jquery": "^3.6.0",
    "leaflet": "^1.7.1",
    "leaflet-gesture-handling": "^1.2.2",
    "leaflet-providers": "^1.12.0",
    "leaflet-zoom-min": "^1.1.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.2",
    "ng-click-outside": "^8.0.0",
    "ng2-charts": "^4.1.1",
    "ngx-bootstrap": "^6.2.0",
    "ngx-feature-toggle": "^11.0.0",
    "oidc-client": "^1.11.5",
    "patternomaly": "^1.3.2",
    "prism-themes": "^1.6.0",
    "prismjs": "^1.23.0",
    "rxjs": "~6.6.0",
    "showdown": "^1.9.1",
    "stream": "0.0.2",
    "tslib": "^2.0.0",
    "wordcloud": "^1.2.2",
    "zone.js": "~0.11.4"
  }

[stockiNail]

@saravanapriyanm see chartjs/chartjs-plugin-annotation#877

This plugin must be changed as well

[toujames]

I get the same error too. Here's a temporary solution:
in the tsconfig.json file set the "sikpLibCheck" under compilerOptions to true.

"compilerOptions": {
    "skipLibCheck": true, // this must be true.
    ..
    ..
}

[simonbrunel]

@stockiNail I don't remember what was the decision about this issue: is it fixed in the latest Chart.js version?

[stockiNail]

@simonbrunel The decision was to change types of Chart.js. PR chartjs/Chart.js#11309

It was merged on main and tagged for version 4.3.1 (not released yet).

[stockiNail]

Chart.js 4.3.1 has been released right now https://github.com/chartjs/Chart.js/releases/tag/v4.3.1 with the fix for this issue