Require cycle with react native web with v2.16.1

[chico-oliveira]

Description

I've implemented a Drawer layout with expo navigation based on this example

This seems to work fine when running expo go on ios and android sims, but on web I'm getting a require cycle warning.

Full error -> Require cycle: node_modules/react-native-gesture-handler/lib/commonjs/RNGestureHandlerModule.web.js -> node_modules/react-native-gesture-handler/lib/commonjs/web/Gestures.js -> node_modules/react-native-gesture-handler/lib/commonjs/web/handlers/PanGestureHandler.js -> node_modules/react-native-gesture-handler/lib/commonjs/web/handlers/GestureHandler.js -> node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestureHandlerCommon.js -> node_modules/react-native-gesture-handler/lib/commonjs/RNGestureHandlerModule.web.js

Steps to reproduce

1. Run react native app locally on web using expo go
2. Use react native gesture handler package in project

Snack or a link to a repository

Gesture Handler version

2.16.1

React Native version

0.74.3

Platforms

Web

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[m-bert]

Hi @chico-oliveira!

Have you followed all installation steps? You can also try deleting node_modules and reseting caches.

A while ago we've merged #2783 (though I have checked on the commit before this one and the dependency mentioned in this issue wasn't there). We've also recently merged #2970.

I've manually checked the path mentioned in the issue and there is no cycle. This is how last file on path looks like in lib/common in our repository:

gestureHandlerCommon.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MouseButton = exports.baseGestureHandlerWithDetectorProps = exports.baseGestureHandlerProps = void 0;
// Previous types exported gesture handlers as classes which creates an interface and variable, both named the same as class.
// Without those types, we'd introduce breaking change, forcing users to prefix every handler type specification with typeof
// e.g. React.createRef<TapGestureHandler> -> React.createRef<typeof TapGestureHandler>.
// See https://www.typescriptlang.org/docs/handbook/classes.html#constructor-functions for reference.
const commonProps = ['id', 'enabled', 'shouldCancelWhenOutside', 'hitSlop', 'cancelsTouchesInView', 'userSelect', 'activeCursor', 'mouseButton', 'enableContextMenu', 'touchAction'];
const componentInteractionProps = ['waitFor', 'simultaneousHandlers', 'blocksHandlers'];
const baseGestureHandlerProps = [...commonProps, ...componentInteractionProps, 'onBegan', 'onFailed', 'onCancelled', 'onActivated', 'onEnded', 'onGestureEvent', 'onHandlerStateChange'];
exports.baseGestureHandlerProps = baseGestureHandlerProps;
const baseGestureHandlerWithDetectorProps = [...commonProps, 'needsPointerData', 'manualActivation'];
exports.baseGestureHandlerWithDetectorProps = baseGestureHandlerWithDetectorProps;
let MouseButton;
exports.MouseButton = MouseButton;

(function (MouseButton) {
  MouseButton[MouseButton["LEFT"] = 1] = "LEFT";
  MouseButton[MouseButton["RIGHT"] = 2] = "RIGHT";
  MouseButton[MouseButton["MIDDLE"] = 4] = "MIDDLE";
  MouseButton[MouseButton["BUTTON_4"] = 8] = "BUTTON_4";
  MouseButton[MouseButton["BUTTON_5"] = 16] = "BUTTON_5";
  MouseButton[MouseButton["ALL"] = 31] = "ALL";
})(MouseButton || (exports.MouseButton = MouseButton = {}));
//# sourceMappingURL=gestureHandlerCommon.js.map

As you can see this file doesn't have any require function (and it definitely shouldn't have one for RNGestureHandlerModule).

.ts file also doesn't have any import from RNGestureHandlerModule

If the issue persists, please provide a reproduction that we can look at.

[m-bert]

Also I'm not sure what do you mean by

Run react native app locally on web using expo go

Does it mean to run yarn web, or do we have to do something else?

[chico-oliveira]

Sorry yeah I meant just running the web app using expo go, so yarn web or more specifically expo start --web.

I'll try recreating it and post that repo here as soon as I get the chance.

[andredewaard]

Having the same issue but with running npm run ios so the app runs in the simulator via the Expo Go app.

this is the warning im getting

Require cycle: node_modules/react-native-gesture-handler/lib/commonjs/RNGestureHandlerModule.web.js -> node_modules/react-native-gesture-handler/lib/commonjs/web/Gestures.js -> node_modules/react-native-gesture-handler/lib/commonjs/web/handlers/PanGestureHandler.js -> node_modules/react-native-gesture-handler/lib/commonjs/web/handlers/GestureHandler.js -> node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestureHandlerCommon.js -> node_modules/react-native-gesture-handler/lib/commonjs/RNGestureHandlerModule.web.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. 
  factory (node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestureHandlerCommon.js:17:54)
  factory (node_modules/react-native-gesture-handler/lib/commonjs/web/handlers/GestureHandler.js:18:29)
λ  WARN  props.pointerEvents is deprecated. Use style.pointerEvents 

package.json

{
  "name": "...",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.0",
    "@gorhom/bottom-sheet": "^4.6.3",
    "@hookform/resolvers": "^3.4.2",
    "@pakenfit/react-native-pin-input": "^1.3.0",
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-native-community/datetimepicker": "8.0.1",
    "@react-navigation/native": "^6.0.2",
    "@sentry/react-native": "~5.22.0",
    "@tanstack/query-async-storage-persister": "^5.38.0",
    "@tanstack/react-query": "^5.39.0",
    "@tanstack/react-query-persist-client": "^5.39.0",
    "@types/ms": "^0.7.34",
    "@types/qs": "^6.9.15",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "date-fns": "^3.6.0",
    "expo": "^51.0.18",
    "expo-build-properties": "~0.12.3",
    "expo-clipboard": "~6.0.3",
    "expo-constants": "~16.0.2",
    "expo-dev-client": "~4.0.19",
    "expo-font": "~12.0.5",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.17",
    "expo-secure-store": "~13.0.2",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.7",
    "expo-web-browser": "~13.0.3",
    "fast-text-encoding": "^1.0.6",
    "ky": "^1.2.4",
    "lucide-react-native": "^0.381.0",
    "ms": "^2.1.3",
    "nativewind": "^4.0.1",
    "prettier-plugin-organize-imports": "^3.2.4",
    "prettier-plugin-tailwindcss": "^0.6.2",
    "qs": "^6.12.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.51.5",
    "react-native": "0.74.3",
    "react-native-date-picker": "^5.0.4",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-modal-datetime-picker": "^17.1.0",
    "react-native-picker-select": "^9.1.3",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.1",
    "react-native-screens": "3.31.1",
    "react-native-svg": "15.2.0",
    "react-native-url-polyfill": "^2.0.0",
    "react-native-web": "~0.19.10",
    "tailwind-merge": "^2.3.0",
    "tailwindcss": "^3.4.3",
    "tailwindcss-animate": "^1.0.7",
    "usehooks-ts": "^3.1.0",
    "zod": "^3.23.8",
    "zustand": "^4.5.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.2.45",
    "@types/react-test-renderer": "^18.0.7",
    "jest": "^29.2.1",
    "jest-expo": "~51.0.3",
    "msw": "^2.3.1",
    "react-test-renderer": "18.2.0",
    "typescript": "~5.3.3"
  },
  "private": true,
  "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
}

[m-bert]

HI @andredewaard! As I showed in my original reply, there is no cycle with gestureHandlerCommon since it doesn't import RNGestureHandlerModule. I've once again gone through this path (now it was from your warning message) and it ends on gestureHandlerCommon.

Given that, there is nothing to be done. It would be nice if you could prepare repository with reproduction, then we can try to do something.

[kasparas-ban]

@m-bert I created a simple expo router template app via npx create-expo-app@latest and added React Native Gesture Handler as per the instructions. Launching the app on Android I get no warnings, but launching the app on the web, the require cycle warning appears.

Please have a look, this is is the repo: https://github.com/kasparas-ban/gesture-app

[m-bert]

Oh, now I see it. I'm not sure why I've missed that while going through this path on the commit before removing circular dependencies on web. I've probably overlooked that.

The thing is, this cycle is no longer present in our source code. It was fixed in #2970. It hasn't been released yet though.

I will close this issue. You can install Gesture Handler from main branch to see if it was resolved (I've already done this). If you still see this issue, feel free to reopen it.