MatDatepickerModuleとevents-polyfillの相性が悪く、エラーが出る

以下の事象を解決したく、解決法にお心当たりがあればご教示願いたいです。

事象

アプリを起動して画面を開いたときに、以下のようなエラーがコンソールに出力されており、画面が表示されません。

Uncaught TypeError: Cannot set property passive of [object Object] which has only a getter
    at Object.module.exports.EventListenerInterceptor.normalizeListenerOptions (index.js:115)
    at Object.module.exports.EventListenerInterceptor.normalizeListenerArguments (index.js:125)
    at target.addEventListener (index.js:164)
    at supportsPassiveEventListeners (platform.js:175)
    at normalizePassiveListenerOptions (platform.js:192)
    at Module.../../node_modules/@angular/cdk/__ivy_ngcc__/fesm2015/a11y.js (a11y.js:1772)
    at __webpack_require__ (bootstrap:84)
    at Module.../../node_modules/@angular/material/__ivy_ngcc__/fesm2015/core.js (core.js:1)
    at __webpack_require__ (bootstrap:84)
    at Module../src/app/app-share.module.ts (app-share.module.ts:1)

調査したこと

AngularMaterialのMatDatepickerModuleを使用しているのですが、どうやらそれが「events-polyfill」※と相性が悪いことが原因のようです。
polyfills.tsから、「import “events-polyfill”;」の記載を削除したらエラーが出なくなりました。

※events-polyfill

類似の事象についての参考リンクがあり、events-polyfillを最新化することを推奨しているのですが、それを実施しても結果変わらずでした。

各バージョン情報(package.json抜粋)

"@angular/animations": "^10.0.4",
"@angular/cdk": "^10.1.0",
"@angular/common": "^10.0.4",
"@angular/compiler": "^10.0.4",
"@angular/core": "^10.0.4",
"@angular/forms": "^10.0.4",
"@angular/material": "^10.1.0",
"@angular/platform-browser": "^10.0.4",
"@angular/platform-browser-dynamic": "^10.0.4",
"@angular/router": "^10.0.4",
"@angular/upgrade": "^10.0.4",
"base64url": "^3.0.1",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.4",
"element-closest-polyfill": "^1.0.0",
"events-polyfill": "^2.1.2",
"ngx-cookie-service": "^3.0.4",
"rxjs": "^6.6.0",
"tslib": "^2.0.0",
"url-search-params-polyfill": "^7.0.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.10.2"

テンプレートHTMLの中でMatDatepickerを使っている部分を見せてもらえますか?

lacolacnoさん

コメントありがとうございます。
以下の通り実装しています。

<div (click)="pickerStart.open()">
  <input
    type="text"
    id="start-date"
    class="m-input-field-cal is-required js-activation-req"
    matInput
    [matDatepicker]="pickerStart"
    [matDatepickerFilter]="businessDay"
    [min]="minDate"
    [max]="maxDate"
    placeholder="選択してください"
    [(ngModel)]="startDate"
    data-current-date=""
    disabled
  />
  <mat-datepicker #pickerStart touchUi="true" disabled="false"> </mat-datepicker>
</div>

Angular CDKにおいてブラウザがpassive optionsに対応しているかの判定部分で
getter のみを定義したオブジェクトを渡している ( https://github.com/angular/components/blob/10.1.1/src/cdk/platform/features/passive-listeners.ts#L20 )ために、
events-polyfill`側でpassiveにsetしている箇所 (https://github.com/lifaon74/events-polyfill/blob/bc989dc00fb90a42ae9c012c309d48710dec2589/src/EventListenerInterceptor.js#L114) と競合しているようです。

ListenerOptionsのPolyfillを使っていないならばそれ以外を個別に読み込むと解決できると思います。
使っている場合は、events-polyfill側にパッチを当てるなどのDirtyな解決策しか思い付きませんでした。

1 Like