TS2430: Interface 'Event' incorrectly extends interface 'KeyboardEvent'

[philipp-wy]

Describe the bug After updating our dependencies to the newest major releases the following error appears when starting storybook:

Error: node_modules/@storybook/api/dist/ts3.9/modules/shortcuts.d.ts:55:18 - error TS2430: Interface 'Event' incorrectly extends interface 'KeyboardEvent'. Types of property 'target' are incompatible. Property 'prototype' is missing in type '{ tagName: string; addEventListener(): void; removeEventListener(): boolean; dispatchEvent(event: Event): boolean; getAttribute(attr: string): string; }' but required in type 'EventTarget'.

55 export interface Event extends KeyboardEvent {

  node_modules/typescript/lib/lib.dom.d.ts:5162:5
    5162     prototype: EventTarget;

'prototype' is declared here.

at addError (D:\git\dios\suhpk-frontend-lib\node_modules\@ngtools\webpack\src\ivy\diagnostics.js:31:29)
at D:\git\dios\suhpk-frontend-lib\node_modules\@ngtools\webpack\src\ivy\diagnostics.js:17:17
at AngularWebpackPlugin.updateJitProgram (D:\git\dios\suhpk-frontend-lib\node_modules\@ngtools\webpack\src\ivy\plugin.js:490:9)
at AngularWebpackPlugin.setupCompilation (D:\git\dios\suhpk-frontend-lib\node_modules\@ngtools\webpack\src\ivy\plugin.js:210:20)
at D:\git\dios\suhpk-frontend-lib\node_modules\@ngtools\webpack\src\ivy\plugin.js:131:22
at Hook.eval [as call] (eval at create (D:\git\dios\suhpk-frontend-lib\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:19:1)
at Hook.CALL_DELEGATE [as _call] (D:\git\dios\suhpk-frontend-lib\node_modules\webpack\node_modules\tapable\lib\Hook.js:14:14)
at Compiler.newCompilation (D:\git\dios\suhpk-frontend-lib\node_modules\webpack\lib\Compiler.js:1121:30)
at D:\git\dios\suhpk-frontend-lib\node_modules\webpack\lib\Compiler.js:1166:29
at _next0 (eval at create (D:\git\dios\suhpk-frontend-lib\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:41:1)

To Reproduce package.json:

"dependencies": { "@angular/animations": "^14.2.6", "@angular/cdk": "^14.2.5", "@angular/common": "^14.2.6", "@angular/compiler": "^14.2.6", "@angular/core": "^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", "@ngneat/transloco": "^4.1.1", "dayjs": "^1.11.5", "ngx-mask": "^14.2.3", "rxjs": "^7.5.7", "tslib": "^2.4.0", "zone.js": "^0.11.8" }, "devDependencies": { "@angular-devkit/build-angular": "^14.2.6", "@angular-eslint/builder": "^14.1.2", "@angular-eslint/eslint-plugin": "^14.1.2", "@angular-eslint/eslint-plugin-template": "^14.1.2", "@angular-eslint/schematics": "^14.1.2", "@angular-eslint/template-parser": "^14.1.2", "@angular/cli": "^14.2.6", "@angular/compiler-cli": "^14.2.6", "@angular/elements": "^14.2.6", "@babel/core": "^7.19.3", "@compodoc/compodoc": "^1.1.19", "@ngneat/spectator": "^11.2.1", "@storybook/addon-actions": "^6.5.12", "@storybook/addon-essentials": "^6.5.12", "@storybook/addon-links": "^6.5.12", "@storybook/angular": "^6.5.12", "@storybook/builder-webpack5": "^6.5.12", "@storybook/manager-webpack5": "^6.5.12", "@types/common-tags": "^1.8.1", "@types/jasmine": "^4.3.0", "@types/node": "^18.8.5", "@typescript-eslint/eslint-plugin": "^5.40.0", "@typescript-eslint/parser": "^5.40.0", "@webcomponents/custom-elements": "^1.5.0", "babel-loader": "^8.2.5", "common-tags": "^1.8.2", "eslint": "^8.25.0", "eslint-plugin-deprecation": "^1.3.2", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jsdoc": "^39.3.6", "eslint-plugin-prefer-arrow": "^1.2.3", "eslint-plugin-sonarjs": "^0.16.0", "husky": "^8.0.1", "import-sort-style-module": "^6.0.0", "jasmine-core": "^4.4.0", "karma": "^6.4.1", "karma-chrome-launcher": "^3.1.1", "karma-coverage": "^2.2.0", "karma-jasmine": "^5.1.0", "karma-jasmine-html-reporter": "^2.0.0", "lint-staged": "^13.0.3", "ng-packagr": "^14.2.1", "prettier": "^2.7.1", "prettier-plugin-import-sort": "^0.0.7", "sonar-scanner": "^3.1.0", "typescript": "^4.8.4" }

System Please paste the results of npx sb@next info here.

Additional context Add any other context about the problem here.

[dkoprowski]

Hi, I installed this version of "@types/node": "18.7.23" and it is fixed now. What is interesting – I didn't had this package in my project previously at all.

[philipp-wy]

Thanks @dkoprowski, that worked perfectly!

[dkoprowski]

Im happy to help. I think my workaround doesn't close the issue though. It shouldn't be needed to downgrade other packages in order to use Storybook.

[philipp-wy]

@dkoprowski yes, you are right. I reopened it.

[petterhoel]

Same issue here with completely new angular project
npx @angular/cli@latest new Frontend cd into folder ng add @angular/material //should not interfere and then in root angular folder: npx storybook init

Used same workaround as suggested by @dkoprowski (thanks!)

(edit: typos)

[vnabet]

Same issue here

node 16.17.0 @angular/cli 14.2.6 strorybook 6.5.12

Effectively version 18.7.23 of @types/node solves the problem