TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'. in `monitorResize`
まだ誰も着手していません。
評価
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 初心者へのやさしさ
- 25/100
- issue の種類
- バグ
- 明瞭さ
- 説明が足りない
- 活発さ
- 停滞
- 技術スタック
- javascript, react
- 領域
- frontend
調査の方向性
util.js の monitorResize から始め、Align.js:110 からの呼び出しを調べます。issue に記載されたホバー操作を再現し、ResizeObserver.observe にどの値が渡されるかを確認します。完了条件は、ホバー経路で報告された TypeError が発生しなくなることです。issue ではテストファイルは指定されていません。
索引モデルが issue の本文から書いたものです。
説明
The following error happens when hovering an element.
See video: https://youtu.be/-aLHvTHvp7Q
TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'.
at ft (util.js:58)
at Align.js:110
at Oi (react-dom.production.min.js:262)
at KqkS.t.unstable_runWithPriority (scheduler.production.min.js:18)
at jl (react-dom.production.min.js:122)
at Ti (react-dom.production.min.js:261)
at pi (react-dom.production.min.js:243)
at react-dom.production.min.js:123
at KqkS.t.unstable_runWithPriority (scheduler.production.min.js:18)
at jl (react-dom.production.min.js:122)
at Hl (react-dom.production.min.js:123)
at $l (react-dom.production.min.js:122)
at De (react-dom.production.min.js:292)
at react-dom.production.min.js:50
at zr (react-dom.production.min.js:105)
at Zt (react-dom.production.min.js:75)
at Jt (react-dom.production.min.js:74)
at KqkS.t.unstable_runWithPriority (scheduler.production.min.js:18)
at Gt (react-dom.production.min.js:73)
at HTMLDivElement.o (helpers.js:72)
Unminified code monitorResize:
export function monitorResize(element, callback) {
var prevWidth = null;
var prevHeight = null;
function onResize(_ref) {
var _ref2 = _slicedToArray(_ref, 1)
, target = _ref2[0].target;
if (!document.documentElement.contains(target))
return;
var _target$getBoundingCl = target.getBoundingClientRect()
, width = _target$getBoundingCl.width
, height = _target$getBoundingCl.height;
var fixedWidth = Math.floor(width);
var fixedHeight = Math.floor(height);
if (prevWidth !== fixedWidth || prevHeight !== fixedHeight) {
// https://webkit.org/blog/9997/resizeobserver-in-webkit/
Promise.resolve().then(function() {
callback({
width: fixedWidth,
height: fixedHeight
});
});
}
prevWidth = fixedWidth;
prevHeight = fixedHeight;
}
var resizeObserver = new ResizeObserver(onResize);
if (element) {
resizeObserver.observe(element); // CRASHES HERE
}
return function() {
resizeObserver.disconnect();
}
;
}
- 主要言語
- TypeScript
- スター
- 944
- フォーク
- 199
- 平均マージ
- 19時間 1分
- マージ済み PR(30日)
- 3
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
react-component/tooltip のほかの issue
-
難易度 3/5 1〜2日 初心者へのやさしさ 64/100
react-component/tooltip#510 · コメント 1 件 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
react-component/tooltip#499 · コメント 1 件 · リアクション 1 件 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
react-component/tooltip#488 · コメント 4 件 · リアクション 2 件 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 35/100
react-component/tooltip#487 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
react-component/tooltip#483 ·
react-component/tooltip の issue をすべて見る
似ている issue
-
blocklist removal
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
MetaMask/eth-phishing-detect#296544 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
pastelsky/bundlephobia#1122 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
-
category/development priority/P2 scope/file-operations scope/testing type/enhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
-
Enatega Customer and Rider app: Add-ons price is not visible to customer after order is placed. オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100