Application build error: "Cannot find module 'chart.js/dist/types/utils' or its corresponding type declarations" #2019
Description
Angular 20, node 22.19, Typescript 5.9 - ng2-charts 8.0, chart.js 4.5.
My yarn build actually runs yarn run lint && ng build --configuration production --source-map - eslint is happy (as are various tests I have), however the build fails with:
Application bundle generation failed. [6.304 seconds] - 2025-10-09T06:39:51.935Z
✘ [ERROR] TS2307: Cannot find module 'chart.js/dist/types/utils' or its corresponding type declarations. [plugin angular-compiler]
node_modules/ng2-charts/lib/ng-charts.provider.d.ts:3:28:
3 │ import { DeepPartial } from 'chart.js/dist/types/utils';
I can confirm that file exists in my node_modules tree:
❯ cat node_modules/chart.js/dist/types/utils.d.ts
/* eslint-disable @typescript-eslint/ban-types */
// DeepPartial implementation taken from the utility-types NPM package, which is
// Copyright (c) 2016 Piotr Witek <[email protected]> (http://piotrwitek.github.io)
// and used under the terms of the MIT license
export type DeepPartial<T> = T extends Function
? T
: T extends Array<infer U>
? _DeepPartialArray<U>
: T extends object
? _DeepPartialObject<T>
: T | undefined;
type _DeepPartialArray<T> = Array<DeepPartial<T>>
type _DeepPartialObject<T> = { [P in keyof T]?: DeepPartial<T[P]> };
export type DistributiveArray<T> = [T] extends [unknown] ? Array<T> : never
// https://stackoverflow.com/a/50375286
export type UnionToIntersection<U> = (U extends unknown ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
export type AllKeys<T> = T extends any ? keyof T : never;
export type PickType<T, K extends AllKeys<T>> = T extends { [k in K]?: any }
? T[K]
: undefined;
export type Merge<T extends object> = {
[k in AllKeys<T>]: PickType<T, k>;
};
(and yes, everything in the tree for that file is world-readable/executable as needed)
I have cleared & reinstalled (rm -rf node_modules yarn.lock && yarn install), and my dependencies are:
"dependencies": {
"@angular/animations": "^20.3.3",
"@angular/cdk": "20.2.7",
"@angular/common": "^20.3.3",
"@angular/compiler": "^20.3.3",
"@angular/core": "^20.3.3",
"@angular/forms": "^20.3.3",
"@angular/material": "20.2.7",
"@angular/platform-browser": "^20.3.3",
"@angular/platform-browser-dynamic": "^20.3.3",
"@angular/router": "^20.3.3",
"@sentry/browser": "9.x",
"chart.js": "^4.5.0",
"chartjs-chart-financial": "^0.2.1",
"chartjs-plugin-zoom": "^2.0.1",
"core-js": "^3.45.x",
"enhanced-resolve": "5.18.x",
"ng": "^0.0.0",
"ng2-charts": "^8.0.0",
"rxjs": "7.8.x",
"yarn": "^1.22.22",
"zone.js": "~0.15.1"
},
"devDependencies": {
"@angular-builders/jest": "20.0.0",
"@angular-devkit/build-angular": "^20.3.5",
"@angular-eslint/builder": "19.x",
"@angular-eslint/eslint-plugin": "^19.8.1",
"@angular-eslint/eslint-plugin-template": "^19.8.1",
"@angular-eslint/schematics": "19.x",
"@angular-eslint/template-parser": "19.x",
"@angular/cli": "^20.3.5",
"@angular/compiler-cli": "^20.3.3",
"@angular/language-service": "20.3.3",
"@eslint/js": "^9.37.0",
"@types/jest": "^29.5.12",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "8.46.x",
"@typescript-eslint/parser": "8.46.x",
"@typescript-eslint/utils": "^8.46.0",
"body-parser": "^1.18.2",
"concurrently": "^4.1.2",
"dlx": "^0.2.1",
"eslint": "9.x",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-import": "latest",
"eslint-plugin-jsdoc": "latest",
"eslint-plugin-prefer-arrow": "latest",
"express": "4.17.1",
"jasmine-core": "^3.7.1",
"jasmine-spec-reporter": "^7.0.0",
"jest": "^29.5.0",
"jest-canvas-mock": "^2.5.2",
"karma-cli": "2.0.0",
"karma-firefox-launcher": "^2.1.3",
"morgan": "1.9.1",
"ng-mocks": "^14.13.5",
"nodemon": "^1.19.1",
"prettier": "3.6.x",
"protractor": "~7.0.0",
"puppeteer": "^22.11.0",
"ts-node": "8.3.0",
"tslint": "~6.1.0",
"typescript": "5.9"
},
... which has no effect on the error.
In my code, I use it thus:
import { Chart } from 'chart.js';
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { ChartConfiguration, ChartData, ChartType, registerables } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';
import { UsageReportingService, UsageReportingData } from './usage-reporting.service';
import zoomPlugin from 'chartjs-plugin-zoom';
// The candlestick graphs are not shown, but they were hard to figure out, so I've left the code
// in, but commented-out
// import { CandlestickController, CandlestickElement, OhlcController, OhlcElement } from 'chartjs-chart-financial';
Chart.register(...registerables);
// Chart.register(OhlcElement, OhlcController, CandlestickElement, CandlestickController, zoomPlugin);
Chart.register(zoomPlugin);
@Component({
selector: 'naas-usage-reporting',
templateUrl: './usage-reporting.component.html',
styleUrls: ['./usage-reporting.component.scss'],
imports: [BaseChartDirective, CommonModule],
})
export class UsageReportingComponent implements OnInit {
// all my stuff
}
Any tips/clues?