Description
Any use of the v3 hook API (useTapGesture, etc.) on web in dev mode (expo start --web) crashes immediately:
ReferenceError: Cannot access 'tagMessage' before initialization
at factory (node_modules/react-native-gesture-handler/lib/commonjs/utils.js:11:22)
at loadModuleImplementation (.../@expo/cli/build/metro-require/require.js:248:36)
at factory (node_modules/react-native-gesture-handler/lib/commonjs/handlers/handlersRegistry.js:17:14)
at factory (node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestures/eventReceiver.js:12:25)
The crash does not happen with expo export --platform web (production build) — only in the dev server. It also does not happen on native platforms.
A couple of things that seem relevant:
tagMessage in src/utils.ts has a 'worklet' directive, new in v3. The pre-compiled CommonJS output at lib/commonjs/utils.js has exports.tagMessage = tagMessage; at the top of the module (before the function declaration), and function tagMessage() with 'worklet' lower down.
- On web, Metro resolves
main → lib/commonjs/index.js (pre-compiled CJS). The worklets Babel plugin processes the 'worklet' directive and appears to convert the function declaration into a const declaration, which eliminates hoisting and causes the TDZ error on the earlier exports.tagMessage = tagMessage assignment.
Steps to reproduce
- Create a new Expo project
- Install
react-native-gesture-handler@3.0.0-beta.2
- Use any v3 gesture hook in a component (e.g.
useTapGesture + GestureDetector)
- Run
npx expo start --web
- Observe the crash
A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.
https://github.com/tobisamuel/web-repro
Gesture Handler version
3.0.0-beta.2
React Native version
0.83.4
Platforms
Web
JavaScript runtime
Hermes
Workflow
Using Expo Go
Architecture
New Architecture (Fabric)
Build type
Debug mode
Device
None
Device model
No response
Acknowledgements
Yes
Description
Any use of the v3 hook API (
useTapGesture, etc.) on web in dev mode (expo start --web) crashes immediately:The crash does not happen with
expo export --platform web(production build) — only in the dev server. It also does not happen on native platforms.A couple of things that seem relevant:
tagMessageinsrc/utils.tshas a'worklet'directive, new in v3. The pre-compiled CommonJS output atlib/commonjs/utils.jshasexports.tagMessage = tagMessage;at the top of the module (before the function declaration), andfunction tagMessage()with'worklet'lower down.main→lib/commonjs/index.js(pre-compiled CJS). The worklets Babel plugin processes the'worklet'directive and appears to convert the function declaration into aconstdeclaration, which eliminates hoisting and causes the TDZ error on the earlierexports.tagMessage = tagMessageassignment.Steps to reproduce
react-native-gesture-handler@3.0.0-beta.2useTapGesture+GestureDetector)npx expo start --webA link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.
https://github.com/tobisamuel/web-repro
Gesture Handler version
3.0.0-beta.2
React Native version
0.83.4
Platforms
Web
JavaScript runtime
Hermes
Workflow
Using Expo Go
Architecture
New Architecture (Fabric)
Build type
Debug mode
Device
None
Device model
No response
Acknowledgements
Yes