React: [Fibre] Auf requestAnimationFrame prüfen wird ausgelöst, wenn auf dem Server ein React-Dom erforderlich ist

Erstellt am 3. März 2017  ·  5Kommentare  ·  Quelle: facebook/react

Möchten Sie eine Funktion anfordern oder einen Fehler melden?
Bug-ish

Wie ist das aktuelle Verhalten?
Wenn beim serverseitigen Rendern mit React react-dom erforderlich ist (was transitiv ReactDOMFrameScheduling.js erfordert), wird eine Ausnahme ausgelöst, da rAF nicht definiert ist.

Invariant Violation: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers.
    at invariant (app/node_modules/fbjs/lib/invariant.js:44:15)
    at Object.<anonymous> (app/node_modules/react-dom/lib/ReactDOMFrameScheduling.js:30:3)

Dies kann passieren, wenn Sie über eine universelle Komponente verfügen, die clientseitige Bibliotheken auf höchster Ebene importiert, z. B. react-router-scroll , für die react-dom anstelle von react-dom/server erforderlich sind.

Was ist das erwartete Verhalten?
Ich würde erwarten, diesen Fehler nur dann zu erhalten, wenn requestAnimationFrame tatsächlich aufgerufen wurde. Bsp.: Faul nach rAF suchen und rIC definieren.

Welche Versionen von React und welcher Browser / welches Betriebssystem sind von diesem Problem betroffen?
Reagiere 16.0.0-alpha.3 auf Knoten 7.7.1. Dies begann in Alpha 3, das Fibre ausgeliefert und aktiviert hat.

Bug

Hilfreichster Kommentar

Eine Problemumgehung, die mein erwartetes Verhalten erreicht, besteht darin, dass jeder React-Benutzer eine kleine Polyfüllung in einer Datei definiert, die vor den anderen importiert wurde. Ich erwarte jedoch, dass viele Benutzer auf dieses Problem stoßen. So sieht es aus:

global.window = global;
window.addEventListener = () => {};
window.requestAnimationFrame = () => {
  throw new Error('requestAnimationFrame is not supported in Node');
};

Alle 5 Kommentare

Eine Problemumgehung, die mein erwartetes Verhalten erreicht, besteht darin, dass jeder React-Benutzer eine kleine Polyfüllung in einer Datei definiert, die vor den anderen importiert wurde. Ich erwarte jedoch, dass viele Benutzer auf dieses Problem stoßen. So sieht es aus:

global.window = global;
window.addEventListener = () => {};
window.requestAnimationFrame = () => {
  throw new Error('requestAnimationFrame is not supported in Node');
};

Wir könnten dies beheben, indem wir rAF polyfill träge initialisieren, aber jetzt, wo ich darüber nachdenke, scheint es bedauerlich, dass durch den bloßen Import von findDOMNode (was wahrscheinlich die Komponenten tun) der gesamte Init-Code des Client-Reconcilers ausgeführt wird .

@gaearon Sollte es nicht im Unit-Test gefangen worden

Noch wichtiger ist, dass react-dom und das Ausführen von findDOMNode auf dem Server kein Anti-Pattern sind und dass Komponenten diese in Hooks vermeiden müssen, die auf dem Server ausgeführt werden?

Noch wichtiger ist, dass React-Dom und das Ausführen von findDOMNode auf dem Server kein Anti-Pattern sind und dass Komponenten diese in Hooks vermeiden müssen, die auf dem Server ausgeführt werden.

Sie sollten es nicht auf dem Server ausführen, aber der Import ist in Ordnung. Wie würden Sie sonst eine Komponente schreiben, die findDOMNode auf dem Client verwendet, aber dennoch auf dem Server funktioniert?

Sollte es nicht im Unit-Test gefangen worden sein

Nein, der Test erfasst dies nicht, da wir als Teil unserer Testumgebung eine globale rAF-Polyfüllung eingerichtet haben.

Bearbeiten: Die PR dient nur zur Veranschaulichung. Ich habe gerade die Unit-Tests durchgeführt. Noch kein Flusen und schöner Lauf.

Öffnete eine PR, um die Idee in Code zu schreiben.

Ich habe den Scheck für rAF in den ReactFiberScheduler verschoben

Aber jetzt habe ich die Fähigkeit zum Werfen verloren, wenn das rAF nicht polygefüllt ist. Ist dies der richtige Ort für den von Ihnen erwähnten Lazy Check?

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen