React: [Fibra] Verifique se o requestAnimationFrame lança quando o react-dom é necessário no servidor

Criado em 3 mar. 2017  ·  5Comentários  ·  Fonte: facebook/react

Você quer solicitar um recurso ou relatar um bug ?
Bug-ish

Qual é o comportamento atual?
Ao fazer a renderização do lado do servidor com React, exigir react-dom (que requer temporariamente ReactDOMFrameScheduling.js ) lança uma exceção porque o rAF não 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)

Isso pode acontecer se você tiver um componente universal com importações de nível superior de bibliotecas do lado do cliente, como react-router-scroll , que requerem react-dom vez de react-dom/server .

Qual é o comportamento esperado?
Eu esperaria não receber esse erro, a menos que requestAnimationFrame fosse realmente chamado. Ex: verifique preguiçosamente o rAF e defina o rIC.

Quais versões do React e quais navegadores / sistemas operacionais são afetados por esse problema?
React 16.0.0-alpha.3 no nó 7.7.1. Isso começou a acontecer em alpha 3, que distribuiu e habilitou o Fiber.

Bug

Comentários muito úteis

Uma solução alternativa que atinge meu comportamento esperado é que cada consumidor do React defina um pequeno polyfill em um arquivo que é importado antes dos outros, mas espero que muitas pessoas encontrem esse problema. Isto é o que parece:

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

Todos 5 comentários

Uma solução alternativa que atinge meu comportamento esperado é que cada consumidor do React defina um pequeno polyfill em um arquivo que é importado antes dos outros, mas espero que muitas pessoas encontrem esse problema. Isto é o que parece:

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

Poderíamos corrigir isso inicializando preguiçosamente rAF polyfill, mas agora que penso nisso, parece lamentável que simplesmente importar findDOMNode (que é provavelmente o que os componentes fazem) executa todo o código de inicialização do reconciliador de cliente .

@gaearon Não deveria ter sido detectado no teste de unidade

Além disso, mais importante, não é exigir react-dom e executar findDOMNode no servidor um anti-padrão, e os componentes devem evitá-los em ganchos executados no servidor?

Além disso, o mais importante é que exigir o react-dom e executar findDOMNode no servidor não é um anti-padrão, e os componentes devem evitá-los em ganchos executados no servidor?

Você não deve executá-lo no servidor, mas pode importá-lo. Caso contrário, como você escreveria um componente que usa findDOMNode no cliente, mas ainda funciona no servidor?

Não deveria ter sido detectado no teste de unidade

Não, o teste não detecta isso porque configuramos um polyfill rAF global como parte de nosso ambiente de teste.

Edit: O PR é apenas para ilustração. Apenas executei os testes de unidade. Sem fiapos e corrida mais bonita ainda.

Abriu um PR para colocar a ideia em código.

Mudei o cheque de rAF dentro do ReactFiberScheduler

Mas agora, perdi a capacidade de lançar se rAF não for polyfilled. Este é o lugar certo para a verificação preguiçosa que você mencionou?

Esta página foi útil?
0 / 5 - 0 avaliações