requestAnimationFrame не определен в Next.js с React Native Web (анимационный модуль)

Я работаю над Next.js и React-Native-Web. Мне удалось запустить их вместе, следуя официальному примеру Next.js, но когда я пытаюсь использовать пакет Animated из react-native, происходит сбой с ошибкой, что requestAnimationFrame не определен. По сути, эта функциональность выполняет пакет node_modules, но я установил псевдоним в webpack для перевода всех требований react-native в react-native-web, поэтому даже пакет node_modules должен использовать реагировать на родной сети.

Любые предложения о том, как решить эту проблему?

ReferenceError: requestAnimationFrame is not defined
    at start (...node_modules\react-native-web\
dist\cjs\vendor\react-native\Animated\animations\TimingAnimation.js:104:11)
enter code here

Скриншот ошибки

Спасибо за любую помощь!


react-native reactjs next.js react-native-web requestanimationframe
person Velidan    schedule 25.04.2020    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Проблема в пропущенном функционале RequestAnimationFrame на сервере. Эта ошибка возникает, когда Next.js пытается отобразить компонент во время SSR. К сожалению, для этой цели нет полифилла и т. д., поэтому я просто решил использовать динамический импорт Next.js для компонента с функциями анимации.

Официальная документация Next.js

Мой собственный случай должен показать, как выглядит код:

import dynamic from 'next/dynamic';

const AutocompleteDropdown = dynamic(
  () => import(
    'myAwesomeLib/components/dropdown/autocomplete/AutocompleteDropdown'
  ),
  {
    ssr: false,
  }
);

Теперь вы можете использовать AutocompleteDropdown в качестве стандартного компонента JSX.

person Velidan    schedule 08.10.2020
comment
У меня та же проблема, и я до сих пор не могу заставить ее работать, потому что на самом деле при навигации компонент Drawer автоматически загружает анимированный модуль, поэтому я не могу использовать в нем динамический импорт. Даже если я не использую анимированный вид, он автоматически импортирует его из модуля. Поэтому я должен подделать полифилл для серверной части и использовать условие для загрузки View или Animated.View соответственно. Но я пока не знаю, как подделать полифилловый узел js до того, как коды дойдут до модулей. Возможно, в Webpack next.config.js. - person KeitelDOG; 27.07.2021
comment
Хм, а что, если вы создадите какой-нибудь HOC/Wrapper для вашего анимированного компонента и там сможете проверить, идет ли процесс в серверном режиме, и вы просто не будете рендерить анимированный компонент в случае SSR? Честно говоря, я так и не нашел способа создать такой полифилл для SSR. - person Velidan; 27.07.2021
comment
Спасибо, я уже это сделал, я использую Animated View или простой View в соответствии с ServerSR или ClientSR. Но, как я уже сказал, компонент Drawer Navigator в модуле React Navigation автоматически импортирует react-native-animated и использует его автоматически, а есть функция requestAnimationFrame, которой вообще не существует, независимо от того, использую я ее или нет. Пока я просто проверяю, существует ли global.requestAnimationFrame в _app.js, и если нет, то я устанавливаю его как пустую функцию, как поддельный полифилл. Потому что SSR все равно не нуждается в анимации. - person KeitelDOG; 27.07.2021
comment
Это хороший трюк, я его запомню) спасибо @KeitelDOG - person Velidan; 27.07.2021

arrow_upward
1
arrow_downward

Я пытаюсь сделать анимацию на странице NextJs с помощью requestAnimationFrame, и у меня возникают некоторые проблемы. Может быть, в этом проблема: код обрабатывается на стороне сервера, а requestAnimationFrame предназначен для запуска на клиенте?

ссылка

person Ignacio    schedule 06.10.2020
comment
Вы правы, и я решил эту проблему, используя динамический импорт Next.js для загрузки соответствующего компонента, содержащего анимацию. Смотрите мой ответ, может и вам будет полезно) - person Velidan; 08.10.2020