ReferenceError: requestAnimationFrame is not defined

[danielkv]

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)

[marklawlor]

You will need to polyfill it

expo-next-monorepo-example/packages/next/src/pages/_app.tsx

Line 3 in 2ea3063

import 'raf/polyfill'

[danielkv]

I'm using raf to polyfill, but I'm gonna try a different setup

[danielkv]

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.

[marklawlor]

It needs to be before the import of react-native-reanimated (or any import that has react-native-reanimated as a sub dependency).

[danielkv]

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'.

[danielkv]

I think I've missed some settings. I did manage to work!