React: [Fiber] Проверить, не выдает ли requestAnimationFrame, когда на сервере требуется react-dom

Созданный на 3 мар. 2017  ·  5Комментарии  ·  Источник: facebook/react

Вы хотите запросить функцию или сообщить об ошибке ?
Ошибка иш

Каково текущее поведение?
При выполнении рендеринга на стороне сервера с помощью React требование react-dom (которое транзитивно требует ReactDOMFrameScheduling.js ) вызывает исключение, поскольку rAF не определен.

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)

Это может произойти, если у вас есть универсальный компонент, который имеет импорт клиентских библиотек верхнего уровня, например react-router-scroll , для которого требуется react-dom вместо react-dom/server .

Какое ожидаемое поведение?
Я ожидал, что не получу эту ошибку, если на самом деле не будет вызван requestAnimationFrame. Пример: лениво проверьте rAF и определите rIC.

Какие версии React и какой браузер / ОС подвержены этой проблеме?
React 16.0.0-alpha.3 на Node 7.7.1. Это началось в альфа-версии 3, которая поставляла и поддерживала Fiber.

Самый полезный комментарий

Обходной путь, который достигает моего ожидаемого поведения, заключается в том, что каждый потребитель React определяет небольшой полифил в файле, который импортируется раньше других, но я ожидаю, что многие люди столкнутся с этой проблемой. Вот как это выглядит:

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

Все 5 Комментарий

Обходной путь, который достигает моего ожидаемого поведения, заключается в том, что каждый потребитель React определяет небольшой полифил в файле, который импортируется раньше других, но я ожидаю, что многие люди столкнутся с этой проблемой. Вот как это выглядит:

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

Мы могли бы исправить это, лениво инициализировав rAF polyfill, но теперь, когда я думаю об этом, мне кажется неудачным, что простой импорт findDOMNode (что, вероятно, то, что делают компоненты) запускает весь код инициализации согласователя клиента .

@gaearon Разве это не должно было быть обнаружено в модульном тесте?

Кроме того, что более важно, не требуется react-dom и запуск findDOMNode на сервере анти-шаблоном, и что компоненты должны избегать их в хуках, которые выполняются на сервере?

Кроме того, что более важно, не требуется response-dom и запуск findDOMNode на сервере как анти-шаблон, и что компоненты должны избегать их в хуках, которые выполняются на сервере?

Вы не должны запускать его на сервере, но его можно импортировать. В противном случае, как бы вы написали компонент, который использует findDOMNode на клиенте, но при этом работает на сервере?

Разве это не должно было быть обнаружено в модульном тесте?

Нет, тест этого не обнаруживает, потому что мы настроили глобальный полифилл rAF как часть нашей тестовой среды.

Изменить: PR предназначен только для иллюстрации. Просто запустил модульные тесты. Никакого линтинга и красивого пробега пока нет.

Открыл PR, чтобы записать идею в код.

Я переместил чек на rAF в ReactFiberScheduler

Но теперь я потерял возможность бросать, если rAF не полифилен. Это подходящее место для упомянутой вами ленивой проверки?

Была ли эта страница полезной?
0 / 5 - 0 рейтинги