React: [Fiber] Verificación de requestAnimationFrame lanza cuando se requiere react-dom en el servidor

Creado en 3 mar. 2017 · 5Comentarios · Fuente: facebook/react

¿Quieres solicitar una función o informar de un error ?
Bug-ish

¿Cuál es el comportamiento actual?
Al hacer renderizado del lado del servidor con React, requerir react-dom (que requiere de manera transitiva ReactDOMFrameScheduling.js ) arroja una excepción porque rAF no está definido.

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)

Esto puede suceder si tiene un componente universal que tiene importaciones de nivel superior de bibliotecas del lado del cliente, como react-router-scroll , que requieren react-dom lugar de react-dom/server .

¿Cuál es el comportamiento esperado?
Esperaría no recibir este error a menos que se llame a requestAnimationFrame. Ej: verificar perezosamente si hay rAF y definir rIC.

¿Qué versiones de React y qué navegador / sistema operativo se ven afectados por este problema?
Reaccionar 16.0.0-alpha.3 en el nodo 7.7.1. Esto comenzó a suceder en alpha 3, que envió y habilitó Fiber.

Bug

Fuente

ide

👍13

Comentario más útil

Una solución alternativa que logra mi comportamiento esperado es que cada consumidor de React defina un pequeño polyfill en un archivo que se importa antes que los demás, pero espero que muchas personas se encuentren con este problema. Esto es lo que parece:

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

ide en 3 mar. 2017

👍8

Todos 5 comentarios

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

ide en 3 mar. 2017

👍8

Podríamos arreglar esto inicializando perezosamente rAF polyfill, pero ahora que lo pienso, parece desafortunado que la simple importación de findDOMNode (que es probablemente lo que hacen los componentes) ejecuta todo el código de inicio del reconciliador del cliente .

gaearon en 3 mar. 2017

@gaearon ¿No debería haber sido capturado en la prueba unitaria?

Además, lo que es más importante, ¿no es un anti-patrón requerir react-dom y ejecutar findDOMNode en el servidor, y que los componentes deben evitarlos en los ganchos que se ejecutan en el servidor?

ManasJayanth en 9 abr. 2017

Además, lo que es más importante, ¿no es un anti-patrón requerir react-dom y ejecutar findDOMNode en el servidor, y que los componentes deben evitarlos en los ganchos que se ejecutan en el servidor?

No debería ejecutarlo en el servidor, pero importarlo está bien. De lo contrario, ¿cómo escribiría un componente que usa findDOMNode en el cliente pero que aún funciona en el servidor?