Skip to content

ReferenceError: Cannot access 'tagMessage' before initialization on web in dev mode (v3 beta) #4066

@tobisamuel

Description

@tobisamuel

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 mainlib/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

  1. Create a new Expo project
  2. Install react-native-gesture-handler@3.0.0-beta.2
  3. Use any v3 gesture hook in a component (e.g. useTapGesture + GestureDetector)
  4. Run npx expo start --web
  5. 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

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions