Angular14で「Cannot find name ‘PictureInPictureEvent’. Did you mean ‘PictureInPictureEventHandler’?」
今回はAngular14でng sを行ったときに下記のエラーが出たときの対処法についてご紹介していきます。
|
1 2 3 4 5 6 7 8 9 10 11 |
Error: node_modules/preact/src/jsx.d.ts:1479:25 - error TS2552: Cannot find name 'PictureInPictureEvent'. Did you mean 'PictureInPictureEventHandler'? 1479 TargetedEvent<Target, PictureInPictureEvent>; ~~~~~~~~~~~~~~~~~~~~~ Error: node_modules/preact/src/jsx.d.ts:1530:16 - error TS2344: Type 'TargetedPictureInPictureEvent<Target>' does not satisfy the constraint 'TargetedEvent<EventTarget, Event>'. Type 'TargetedPictureInPictureEvent<Target>' is missing the following properties from type 'Omit<Event, "currentTarget">': type, bubbles, cancelBubble, cancelable, and 17 more. 1530 EventHandler<TargetedPictureInPictureEvent<Target>>; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
Angularのバージョンは14.2.12で、Node.jsのバージョンは14.21.3です。
Docker上で環境構築を行っております。
Angular14で「Cannot find name 'PictureInPictureEvent’. Did you mean 'PictureInPictureEventHandler’?」
まずエラー自体はTypeScriptのバージョンを上げれば直ります。
私の場合TypeScriptのバージョンは4.8.4でしたが、4.9以上にすればエラーは出なくなるそうです。
しかし、Angular14.2のTypeScriptのバージョン要件を見ると、「>=4.6.2 <4.9.0」と出ております。
https://angular.jp/guide/versions
つまり、TypeScriptのバージョン4.8.4がAngular14において一番新しいもので、4.9以上に上げてしまうと今度はAngular14.2の要件に違反してしまいます。
Angularのバージョンを上げれば話は早いかもしれませんが、Angularのバージョンを簡単に上げられない場合どうすれば良いのかというと、ひとまずtsconfig.jsonのcompilerOptionsに「"skipLibCheck": true」を追加しましょう。
|
1 2 3 4 5 |
{ "compilerOptions": { "skipLibCheck": true }, } |
skipLibCheckというのはtrueを設定することで「*.d.ts」ファイルに対する型チェックをスキップすることができます。
今回エラーが出たのは「jsx.d.ts」というファイルですが、上記を設定することでエラーは出なくなるでしょう。
ひとまず私の場合はこれで様子を見てみようと思います。
終わりに
今回はAngular14でng sを行ったときに冒頭のエラーが出たときの対処法についてご紹介いたしました。