ReferenceError: requestAnimationFrame is not defined
danielkv opened this issue · comments
I'm having this problem. I believe it's trying to load in the server side, that's why the error, but not sure how to solve it:
ReferenceError: requestAnimationFrame is not defined
at eval (webpack-internal:///../../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedNode.js:94:117)
at Object.../../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedNode.js (/home/daniel/projects/labook/packages/web/.next/server/pages/_app.js:2050:1)
at __webpack_require__ (/home/daniel/projects/labook/packages/web/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///../../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedEvent.js:16:71)
at Object.../../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedEvent.js (/home/daniel/projects/labook/packages/web/.next/server/pages/_app.js:2028:1)
at __webpack_require__ (/home/daniel/projects/labook/packages/web/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///../../node_modules/react-native-reanimated/lib/createAnimatedComponent.js:18:89)
at Object.../../node_modules/react-native-reanimated/lib/createAnimatedComponent.js (/home/daniel/projects/labook/packages/web/.next/server/pages/_app.js:1797:1)
at __webpack_require__ (/home/daniel/projects/labook/packages/web/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///../../node_modules/react-native-reanimated/lib/Animated.js:7:82)
You will need to polyfill it
I'm using raf to polyfill, but I'm gonna try a different setup
I did try a different setup but didn't manage to make it work yet:
import { FC } from 'react';
import AppWrapper from 'app/app/app.wrapper';
import type { AppProps } from 'next/app';
import 'raf/polyfill';
// @ts-ignore
global.setImmediate = requestAnimationFrame;
import 'setimmediate';
const App: FC<AppProps> = ({ Component, pageProps }) => {
return (
<AppWrapper>
<Component {...pageProps} />
</AppWrapper>
);
};
export default App;
When I use like this it gives me this error: TypeError: global.__reanimatedWorkletInit is not a function
import { FC } from 'react';
import 'react-native-reanimated';
import AppWrapper from 'app/app/app.wrapper';
import type { AppProps } from 'next/app';
import 'raf/polyfill';
// @ts-ignore
global.setImmediate = requestAnimationFrame;
import 'setimmediate';
const App: FC<AppProps> = ({ Component, pageProps }) => {
return (
<AppWrapper>
<Component {...pageProps} />
</AppWrapper>
);
};
export default App;
If I use also import 'react-native-reanimated';
like above, it gives me this error: ReferenceError: requestAnimationFrame is not defined
The weird thing is that when I was testing without a monorepo, It worked.
It needs to be before the import of react-native-reanimated (or any import that has react-native-reanimated as a sub dependency).
Trying it here, but it seems to be back to TypeError: global.__reanimatedWorkletInit is not a function
:
TypeError: global.__reanimatedWorkletInit is not a function
at eval (webpack-internal:///../../node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestures/gestureStateManager.js:148:12)
at eval (webpack-internal:///../../node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestures/gestureStateManager.js:151:4)
at Object.../../node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestures/gestureStateManager.js (/home/daniel/projects/labook/packages/web/.next/server/pages/_app.js:5833:1)
at __webpack_require__ (/home/daniel/projects/labook/packages/web/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///../../node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestures/GestureDetector.js:42:28)
at Object.../../node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestures/GestureDetector.js (/home/daniel/projects/labook/packages/web/.next/server/pages/_app.js:5756:1)
at __webpack_require__ (/home/daniel/projects/labook/packages/web/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///../../node_modules/react-native-gesture-handler/lib/commonjs/index.js:213:24)
at Object.../../node_modules/react-native-gesture-handler/lib/commonjs/index.js (/home/daniel/projects/labook/packages/web/.next/server/pages/_app.js:5943:1)
at __webpack_require__ (/home/daniel/projects/labook/packages/web/.next/server/webpack-runtime.js:33:42)
So, now I'm not sure if this error is fixed with import 'react-native-reanimated'
.
I think I've missed some settings. I did manage to work!