[Web] No handler for tag undefined error when having Gesture.exclusive(PanGesture, TapGesture)

[itsramiel]

Description

I am trying to have an Exclusive Gesture between Tap and Pan Gestures. When I pass the Exclusive Gesture to GestureDetector's "gesture" prop, I get the following error in the console:

Uncaught Error: No handler for tag undefined
    getHandler NodeManager.ts:9
    waitFor GestureHandler.ts:514
    ensureConfig GestureHandler.ts:513
    updateGestureConfig GestureHandler.ts:118
    updateGestureHandler RNGestureHandlerModule.web.ts:53
    _loop GestureDetector.tsx:143
    run setImmediate.js:40
    runIfPresent setImmediate.js:69
    onGlobalMessage setImmediate.js:109
    installPostMessageImplementation setImmediate.js:114
    js setImmediate.js:169
    js setImmediate.js:186
    js bundle.js:4755

As well as the whole page becomes unresponsive. Buttons become unpressable. This seems to only occur when having both gestures Exclusively not Simultaneously.

Platforms

• [ ] iOS
• [ ] Android
• [x] Web

Screenshots

Steps To Reproduce

1. In react native web. Add a pan as well as a tap gesture in Gesture.Exclusive and pass it to a GestureDetector

Expected behavior

I should not be getting that error and page should still be responsive

Actual behavior

I get the error shown in the description

Snack or minimal code example

Here is a repro: https://github.com/ramiel1999/gesture-handler-pan-tap/tree/tap-pan-causes-handle-tag-error

export default function App() {
  const translateX = useSharedValue(0);
  const context = useSharedValue(0);

  const rStyle = useAnimatedStyle(() => {
    return { transform: [{ translateX: translateX.value }] };
  }, []);

  const tapGesture = Gesture.Tap().onEnd(() => (translateX.value = withRepeat(withTiming(100), 2, true)));
  const panGesture = Gesture.Pan()
    .onStart(() => {
      console.log("onStart");
      context.value = translateX.value;
    })
    .onChange((e) => {
      translateX.value = e.translationX + context.value;
    })
    .onEnd(() => {
      console.log("onEnd");
      context.value = translateX.value;
    });

  return (
    <GestureHandlerRootView style={styles.container}>
      <GestureDetector gesture={Gesture.Exclusive(tapGesture, panGesture)}>
        <Animated.View style={[styles.box, rStyle]} />
      </GestureDetector>
      <Button title="press me" onPress={() => {}} />
    </GestureHandlerRootView>
  );
}

Package versions

• React: 17.0.2
• React Native: 0.68.2
• React Native Web: 0.17.7
• React Native Gesture Handler: 2.2.1
• React Native Reanimated: 2.8.0

[m-bert]

Hi, this issue should be fixed in 2.6.1

Note that this change is available in new web implementation. To enable it, call enableExperimentalWebImplementation() in the root of your project.

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[j-piasecki]

I'll close the issue since the new web implementation is enabled by default starting with 2.10.0.