Giter VIP home page Giter VIP logo

Comments (6)

marklawlor avatar marklawlor commented on June 19, 2024

You will need to polyfill it

from expo-next-monorepo-example.

danielkv avatar danielkv commented on June 19, 2024

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

from expo-next-monorepo-example.

danielkv avatar danielkv commented on June 19, 2024

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.

from expo-next-monorepo-example.

marklawlor avatar marklawlor commented on June 19, 2024

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

from expo-next-monorepo-example.

danielkv avatar danielkv commented on June 19, 2024

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

from expo-next-monorepo-example.

danielkv avatar danielkv commented on June 19, 2024

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

from expo-next-monorepo-example.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.