react-component / react-component/tooltip

TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'. in `monitorResize`

Offen
#239 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
TypeScript
Sterne
944
Forks
199
Ø Merge
19 Std. 1 Min.
Gemergte PRs (30 T.)
3

Beschreibung

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();
    }
    ;
}

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne in util.js bei monitorResize und untersuche den Aufruf aus Align.js:110; reproduziere die in der Issue beschriebene Hover-Interaktion und bestätige, welcher Wert ResizeObserver.observe erreicht. Als erledigt gilt, wenn der Hover-Pfad den gemeldeten TypeError nicht mehr auslöst; in der Issue wird keine Testdatei genannt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.