Uncaught TypeError: Cannot read property 'disable' of null

1st Official Post
    Affected Version
    WoltLab Suite 3.1
    Affected App
    WoltLab Suite Core

    Bestätigt mit Version 3.1.6 und 5.3

    Betroffene Browser:

    • Opera 72.0.3815.320 (neueste Version)
    • Edge Version 86.0.622.69 (Offizielles Build) (64-Bit)


    Öffnet man die Website mit aktivierten Dev-Tools im Responsive Design mit einer Auflösung von 1436x603 und deaktiviert über "toggle device bar" das responsive Design, erhält man folgenden Fehler:


    Code
    Uncaught TypeError: Cannot read property 'disable' of null
    at Object.disable (Mobile.js?t=1605098745:106)
    at Screen.js?t=1605098745:228
    at Map.forEach (<anonymous>)
    at Dictionary.forEach (Dictionary.js?t=1605098745:96)
    at Object._mqlChange (Screen.js?t=1605098745:227)
    • Official Post

    Leider kann ich es auch dann nicht reproduzieren, ich habe den Browser im Vollbild (1920*1200) laufen lassen und den Zoom auf 100% gestellt. Seite neu geladen und anschließend über den Button die Responsive-Ansicht aufgehoben.


    Im Prinzip identisch zum Vorgehen in meinem Video oben, nur eben im Vollbild ohne Zoom.

    Ich kann das so in Edge Version 86.0.622.69 (Offizielles Build) (64-Bit) reproduzieren.


    Wichtig ist wohl aber, dass man die Seite nochmal neu laden muss, nachdem man die DevTools mit Mobile View geöffnet hat und die Größe eingestellt hat. Erst danach bekomme ich den Fehler beim schließen des Mobile View.


    Im Allgemeinen merke ich auch, dass der Fehler größtenteils bei Auflösungen auftritt in denen die Höhe des Fenster min. 25% kleiner ist als die Breite, aber das gilt nicht immer. Hängt da vielleicht auch vom JS der Seite ab.

    • Official Post

    Die Höhe ist nicht weiter von Belang, der entsprechende Code-Path reagiert nur auf Änderungen der Breite des Browser-Fensters. Konkret wird auf screen-md-down getestet und dies dürfte gar nicht auslösen.


    Es gibt eine entsprechende Logik bei den Media-Queries, die bei einer Änderung aktiv wird, d.h. wenn ein Media-Query (nicht mehr) matched. Die genannte Fehlermeldung kann eigentlich nur auftreten, wenn folgendes passiert:

    1. Die Seite lädt und der Media-Query trifft nicht zu. Es findet keine Initialisierung des Mobile UI statt.
    2. Über die DevTools wird die künstliche Browser-Größe aufgehoben.
    3. Der Media-Query trifft nicht zu, löst aber trotzdem ein Event aus. Der Code springt damit in die Methode zum Deaktivieren des Mobile UI, obwohl das Setup nie durchlief.

    Ich kann mir eigentlich nur irgendeinen kruden Bug vorstellen, durch den die DevTools den Schritt 3 auslösen. Dies kann aber nicht auftreten, da es (a) nicht den Spezifikationen entspricht und (b) ich dies noch nie beobachtet habe. Wenn sich Media-Queries so verhalten würde, wäre die halbe Software längst in Flammen aufgegangen ;)


    Um sicher zu gehen, habe ich ganz spezifisch in dieser Richtung Experimente angestellt und mir die Events der Media-Queries penibel dokumentieren lassen, aber ich konnte zu keinem Zeitpunkt ein Fehlverhalten feststellen. Auch der Hinweis auf die schmalle Höhe, die für den Media-Query irrelevant ist, spricht eher für einen merkwürdigen Bug in den DevTools.


    Abschließend habe ich meine Tests mit Chrome, Opera und Edge wiederholt, jeweils sowohl unter Windows als auch Mac, es war zu keinem Zeitpunkt für mich reproduzierbar. Aus den obigen Gründen und weil die Fehlermeldung effektiv keine Nebenwirkungen hat, werde ich es ab hier nicht mehr weiter verfolgen.


    Wenn ihr es reproduzieren könnt, dann verwendet bitte die angehangene Screen.js für die WoltLab Suite 3.1, diese enthält Debug-Ausgaben für das Verhalten von Media-Queries. Die Ausgaben verwenden jeweils console.debug.

    Ich habe denselben Fehler mit Chrome (aktuelle Version). Mit angehängter Version von screen.js erhalte ich den Fehler wie folgt:

    • Seite im Desktopmodus geladen (mit einer Breite über 1025px, z. B. 1040px). Seite aktualisieren.
    • Responsiven Modus über die DEV-Tools einschalten. Dabei muss die responsive Seite ebenfalls eine Breite über 1024px haben (Desktopbreite). Falls nicht, vorher einstellen und den Vorgang wiederholen.
    • Nun ohne zu Aktualisieren den responsiven Modus wieder ausschalten. Dann erscheint der Fehler in der Konsole. Das lässt sich dann beliebig oft wiederholen.
    • Official Post

    Okay, Danke für die Rückmeldung. Ich konnte bestätigen, dass dieser Bug nur unter Windows auftritt, die selben Browserversionen unter Mac verhalten sich absolut korrekt.


    Als Workaround verhindere ich nun die Ausführung von unmatch-Handlern, wenn das setup noch nicht ausgeführt wurde. Es ist somit immer noch inkorrekt, weil zum Beispiel ein unmatch aufgerufen wird, obwohl der Media Query niemals zuvor aktiv war. Das ist aber ein Browser-Bug, gegen den ich nicht sinnvoll vorgehen kann, aber so ist das Verhalten wenigstens konsistent.


    https://github.com/WoltLab/WCF…919a832729a7ab384ea9d9a4d

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login