aximut
commented
10 months ago 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'],
},
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
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 component: