It doesnt work on web using nextjs (solito)

[AlejandroGutierrezB]

This package has external dependencies of react-native-reanimated and react-native-gesture-handler which must be installed separately. Before opening an issue related to animations or gestures please verify that you have completed ALL installation steps, including the changes to MainActivity.

Describe the bug The packaged doesn't work on web.

The error occurred in the component:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'toString')

Call Stack
toString
../node_modules/react-native-reanimated/lib/module/reanimated2/hook/utils.js (52:30)
Array.reduce
<anonymous>
reduce
../node_modules/react-native-reanimated/lib/module/reanimated2/hook/utils.js (51:33)
buildWorkletsHash
../node_modules/react-native-reanimated/lib/module/reanimated2/hook/utils.js (66:22)
buildDependencies
../node_modules/react-native-reanimated/lib/module/reanimated2/hook/utils.js (39:17)
scrollHandlers
../node_modules/react-native-reanimated/lib/module/reanimated2/hook/useAnimatedScrollHandler.js (10:17)
DraggableFlatListInner
../node_modules/react-native-draggable-flatlist/lib/module/components/DraggableFlatList.js (289:49)
renderWithHooks
../node_modules/react-dom/cjs/react-dom.development.js (16305:0)
updateFunctionComponent
../node_modules/react-dom/cjs/react-dom.development.js (19588:0)
updateSimpleMemoComponent
../node_modules/react-dom/cjs/react-dom.development.js (19425:0)
updateMemoComponent
../node_modules/react-dom/cjs/react-dom.development.js (19284:0)
beginWork
../node_modules/react-dom/cjs/react-dom.development.js (21673:0)
HTMLUnknownElement.callCallback
../node_modules/react-dom/cjs/react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
../node_modules/react-dom/cjs/react-dom.development.js (4213:0)
invokeGuardedCallback
../node_modules/react-dom/cjs/react-dom.development.js (4277:0)
beginWork$1
../node_modules/react-dom/cjs/react-dom.development.js (27451:0)
performUnitOfWork
../node_modules/react-dom/cjs/react-dom.development.js (26557:0)
workLoopSync
../node_modules/react-dom/cjs/react-dom.development.js (26466:0)
renderRootSync
../node_modules/react-dom/cjs/react-dom.development.js (26434:0)
performConcurrentWorkOnRoot
../node_modules/react-dom/cjs/react-dom.development.js (25738:0)
workLoop
../node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
../node_modules/scheduler/cjs/scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
../node_modules/scheduler/cjs/scheduler.development.js (533:0)

To Reproduce

1. npx create-solito-app@latest my-solito-app -t with-tailwind.
2. Install react-native-draggable-flatlist at the packages level.
3. Add react-native-draggable-flatlis to the transpilePackages array at next.config.js.
4. Import the following code example.

import { useCallback, useState } from 'react';
import { Text, StyleSheet, TouchableOpacity, View } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import DraggableFlatList, { ScaleDecorator, RenderItemParams } from 'react-native-draggable-flatlist';

function getColor(i: number, numItems: number) {
  const multiplier = 255 / (numItems - 1);
  const colorVal = i * multiplier;
  return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`;
}

const mapIndexToData = (d: any, index: number, arr: any[]) => {
  const backgroundColor = getColor(index, arr.length);
  return {
    text: `${index}`,
    key: `key-${backgroundColor}`,
    backgroundColor,
  };
};

type Item = ReturnType<typeof mapIndexToData>;

const NUM_ITEMS = 10;

const initialData: Item[] = [...Array(NUM_ITEMS)].map(mapIndexToData);

export default function Horizontal() {
  const [data, setData] = useState(initialData);

  const renderItem = useCallback(({ item, drag, isActive }: RenderItemParams<Item>) => {
    return (
      <ScaleDecorator>
        <TouchableOpacity
          activeOpacity={1}
          onLongPress={drag}
          onPress={() => console.log('something')}
          disabled={isActive}
          style={[
            styles.rowItem,
            {
              opacity: isActive ? 0.5 : 1,
              padding: 5,
              backgroundColor: item.backgroundColor,
            },
          ]}
        >
          <Text style={styles.text}>{item.text}</Text>
        </TouchableOpacity>
      </ScaleDecorator>
    );
  }, []);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        <DraggableFlatList
          horizontal
          data={data}
          onDragEnd={({ data }) => setData(data)}
          keyExtractor={(item) => {
            return item.key;
          }}
          renderItem={renderItem}
          ItemSeparatorComponent={() => <View className='w-2' />}
          renderPlaceholder={() => <View style={{ flex: 1, backgroundColor: '#CBF062', maxWidth: '94%' }} />}
        />
      </View>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  rowItem: {
    height: 100,
    width: 100,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Platform & Dependencies Please list any applicable dependencies in addition to those below (react-navigation etc).

• react-native-draggable-flatlist version: "^4.0.1"
• Platform: web using solito // "solito": "3.0.0" and nextjs // "next": "13.2.4",
• React Native or Expo version: expo sdk 48
• Reanimated version: "3.0.2",
• React Native Gesture Handler version: "~2.9.0",

[aximut]

See also #486

[RobSchilderr]

See also #486

Tried everything related to this, but not sure how to fix this exact same error in my next.config.