scroll handler issue

[wishgoods]

I'm using expo cli and it's a web version, I get a crush and the app cannot run.

on a black app copy the code example from documentation and run on web.

Platform & Dependencies

• react-native-draggable-flatlist latest version:
• Platform: web
• React Native or Expo version: "expo": "~45.0.0",
• Reanimated version:"react-native-reanimated": "^3.3.0",
• React Native Gesture Handler version: "react-native-gesture-handler": "^2.12.0",

Additional context looks like an error happening in the scroll handler.

console:

./node_modules/react-native-reanimated/lib/module/reanimated2/js-reanimated/index.js Module not found: Error: Can't resolve 'react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle' in 'C:\Users\kobi.shunak\Desktop\Dex\DexNative\DEX\node_modules\react-native-reanimated\lib\module\reanimated2\js-reanimated' ./node_modules/react-native-reanimated/lib/module/reanimated2/js-reanimated/index.js Module not found: Error: Can't resolve 'react-native-web/dist/exports/StyleSheet/preprocess' in 'C:\Users\kobi.shunak\Desktop\Dex\DexNative\DEX\node_modules\react-native-reanimated\lib\module\reanimated2\js-reanimated'

developer tools:

utils.ts:83 Uncaught TypeError: Cannot read properties of undefined (reading 'toString') at utils.ts:83:1 at Array.reduce () at buildWorkletsHash (utils.ts:82:1) at buildDependencies (utils.ts:106:1) at useHandler (utils.ts:66:1) at useAnimatedScrollHandler (useAnimatedScrollHandler.ts:34:1) at DraggableFlatListInner (DraggableFlatList.tsx:331:1) at renderWithHooks (react-dom.development.js:14985:1) at updateFunctionComponent (react-dom.development.js:17356:1) at updateSimpleMemoComponent (react-dom.development.js:17215:1) at updateMemoComponent (react-dom.development.js:17092:1) at beginWork (react-dom.development.js:19135:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at beginWork$1 (react-dom.development.js:23964:1) at performUnitOfWork (react-dom.development.js:22779:1) at workLoopSync (react-dom.development.js:22707:1) at renderRootSync (react-dom.development.js:22670:1) at performSyncWorkOnRoot (react-dom.development.js:22293:1) at scheduleUpdateOnFiber (react-dom.development.js:21881:1) at updateContainer (react-dom.development.js:25482:1) at react-dom.development.js:26021:1 at unbatchedUpdates (react-dom.development.js:22431:1) at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020:1) at render (react-dom.development.js:26103:1) at renderApplication (renderApplication.js:23:1) at Object.run (index.js:49:1) at Function.runApplication (index.js:93:1) at registerRootComponent (registerRootComponent.tsx:14:1) at ./index.js (index.js:8:1) at webpack_require (bootstrap:789:1) at fn (bootstrap:100:1) at 1 (TestDrag.jsx:63:1) at webpack_require (bootstrap:789:1) at bootstrap:856:1 at bootstrap:856:1 (anonymous) @ utils.ts:83 buildWorkletsHash @ utils.ts:82 buildDependencies @ utils.ts:106 useHandler @ utils.ts:66 useAnimatedScrollHandler @ useAnimatedScrollHandler.ts:34 DraggableFlatListInner @ DraggableFlatList.tsx:331 renderWithHooks @ react-dom.development.js:14985 updateFunctionComponent @ react-dom.development.js:17356 updateSimpleMemoComponent @ react-dom.development.js:17215 updateMemoComponent @ react-dom.development.js:17092 beginWork @ react-dom.development.js:19135 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 beginWork$1 @ react-dom.development.js:23964 performUnitOfWork @ react-dom.development.js:22779 workLoopSync @ react-dom.development.js:22707 renderRootSync @ react-dom.development.js:22670 performSyncWorkOnRoot @ react-dom.development.js:22293 scheduleUpdateOnFiber @ react-dom.development.js:21881 updateContainer @ react-dom.development.js:25482 (anonymous) @ react-dom.development.js:26021 unbatchedUpdates @ react-dom.development.js:22431 legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020 render @ react-dom.development.js:26103 renderApplication @ renderApplication.js:23 run @ index.js:49 runApplication @ index.js:93 registerRootComponent @ registerRootComponent.tsx:14 ./index.js @ index.js:8 webpack_require @ bootstrap:789 fn @ bootstrap:100 1 @ TestDrag.jsx:63 webpack_require @ bootstrap:789 (anonymous) @ bootstrap:856 (anonymous) @ bootstrap:856 index.js:1 The above error occurred in the <DraggableFlatListInner> component:

at DraggableFlatListInner (http://localhost:19006/static/js/bundle.js:210030:86)
at RefProvider (http://localhost:19006/static/js/bundle.js:211234:23)
at AnimatedValueProvider (http://localhost:19006/static/js/bundle.js:210883:23)
at PropsProvider (http://localhost:19006/static/js/bundle.js:211186:23)
at DraggableFlatList
at App (http://localhost:19006/static/js/bundle.js:292700:73)
at RoutesProvider (http://localhost:19006/static/js/bundle.js:23830:77)
at SettingsProvider (http://localhost:19006/static/js/bundle.js:24263:77)
at AuthProvider (http://localhost:19006/static/js/bundle.js:23255:77)
at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (http://localhost:19006/static/js/bundle.js:46605:69)
at ToastProvider (http://localhost:19006/static/js/bundle.js:147739:24)
at PortalProvider (http://localhost:19006/static/js/bundle.js:50521:70)
at HybridProvider (http://localhost:19006/static/js/bundle.js:156046:23)
at ResponsiveQueryProvider (http://localhost:19006/static/js/bundle.js:174851:13)
at div
at http://localhost:19006/static/js/bundle.js:271201:25
at NativeSafeAreaProvider (http://localhost:19006/static/js/bundle.js:261605:23)
at SafeAreaProvider (http://localhost:19006/static/js/bundle.js:261802:23)
at Provider (http://localhost:19006/static/js/bundle.js:174301:26)
at NativeBaseProvider (http://localhost:19006/static/js/bundle.js:155757:32)
at App
at ExpoRootComponent (http://localhost:19006/static/js/bundle.js:78110:83)
at div
at http://localhost:19006/static/js/bundle.js:271201:25
at div
at http://localhost:19006/static/js/bundle.js:271201:25
at AppContainer (http://localhost:19006/static/js/bundle.js:263061:24)

[aximut]

See https://github.com/software-mansion/react-native-reanimated/issues/2994#issuecomment-1211247103

Add to babel

const compileNodeModules = [
  // Add every react-native package that needs compiling
  'react-native-draggable-flatlist',
...

and

  use: [
    {
      loader: 'babel-loader',
      options: {
        plugins: ['react-native-web', 'react-native-reanimated/plugin'],
      },