Error in Vite when I import { Gesture, GestureDetector } from 'react-native-gesture-handler'

[fanboy-coder]

Hi.

I'm trying to add gestures to my react app built with Vite, but I'm getting the same error when I import { Gesture, GestureDetector } from 'react-native-gesture-handler' and then run the app:

`joel@joel-UX305FA:~/repos/just-one$ npm run dev

just-one@0.0.0 dev
vite

Port 5173 is in use, trying another one...

VITE v5.0.10 ready in 333 ms

➜ Local: http://localhost:5174/
➜ Network: use --host to expose
➜ press h + enter to show help
✘ [ERROR] Unexpected "typeof"

node_modules/react-native/index.js:14:7:
  14 │ import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/Acc...
     ╵        ~~~~~~

✘ [ERROR] Expected "from" but found "{"

node_modules/react-native/Libraries/Utilities/codegenNativeComponent.js:13:12:
  13 │ import type {HostComponent} from '../../Libraries/Renderer/shims/ReactNativeTypes';
     │             ^
     ╵             from

✘ [ERROR] Expected "from" but found "{"

node_modules/react-native/Libraries/Pressability/PressabilityDebug.js:11:12:
  11 │ import type {ColorValue} from '../StyleSheet/StyleSheet';
     │             ^
     ╵             from

✘ [ERROR] Expected "from" but found "{"

node_modules/react-native/Libraries/Renderer/shims/ReactNative.js:15:12:
  15 │ import type {ReactNativeType} from './ReactNativeTypes';
     │             ^
     ╵             from

✘ [ERROR] Expected "from" but found "{"

node_modules/react-native/Libraries/Renderer/shims/ReactFabric.js:17:12:
  17 │ import type {ReactFabricType} from './ReactNativeTypes';
     │             ^
     ╵             from

17:14:19 [vite] error while updating dependencies:
Error: Build failed with 5 errors:
node_modules/react-native/Libraries/Pressability/PressabilityDebug.js:11:12: ERROR: Expected "from" but found "{"
node_modules/react-native/Libraries/Renderer/shims/ReactFabric.js:17:12: ERROR: Expected "from" but found "{"
node_modules/react-native/Libraries/Renderer/shims/ReactNative.js:15:12: ERROR: Expected "from" but found "{"
node_modules/react-native/Libraries/Utilities/codegenNativeComponent.js:13:12: ERROR: Expected "from" but found "{"
node_modules/react-native/index.js:14:7: ERROR: Unexpected "typeof"
at failureErrorWithLog (/home/joel/repos/just-one/node_modules/esbuild/lib/main.js:1650:15)
at /home/joel/repos/just-one/node_modules/esbuild/lib/main.js:1058:25
at /home/joel/repos/just-one/node_modules/esbuild/lib/main.js:1526:9
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
17:14:29 [vite] hmr update /src/components/Game.jsx
17:14:31 [vite] hmr update /src/components/Game.jsx (x2)
17:42:03 [vite] hmr update /src/components/Game.jsx (x3)
✘ [ERROR] Unexpected "typeof"

node_modules/react-native/index.js:14:7:
  14 │ import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/Acc...
     ╵        ~~~~~~

✘ [ERROR] Expected "from" but found "{"

node_modules/react-native/Libraries/Renderer/shims/ReactFabric.js:17:12:
  17 │ import type {ReactFabricType} from './ReactNativeTypes';
     │             ^
     ╵             from

✘ [ERROR] Expected "from" but found "{"

node_modules/react-native/Libraries/Renderer/shims/ReactNative.js:15:12:
  15 │ import type {ReactNativeType} from './ReactNativeTypes';
     │             ^
     ╵             from

✘ [ERROR] Expected "from" but found "{"

node_modules/react-native/Libraries/Utilities/codegenNativeComponent.js:13:12:
  13 │ import type {HostComponent} from '../../Libraries/Renderer/shims/ReactNativeTypes';
     │             ^
     ╵             from

✘ [ERROR] Expected "from" but found "{"

node_modules/react-native/Libraries/Pressability/PressabilityDebug.js:11:12:
  11 │ import type {ColorValue} from '../StyleSheet/StyleSheet';
     │             ^
     ╵             from

17:42:04 [vite] error while updating dependencies:
Error: Build failed with 5 errors:
node_modules/react-native/Libraries/Pressability/PressabilityDebug.js:11:12: ERROR: Expected "from" but found "{"
node_modules/react-native/Libraries/Renderer/shims/ReactFabric.js:17:12: ERROR: Expected "from" but found "{"
node_modules/react-native/Libraries/Renderer/shims/ReactNative.js:15:12: ERROR: Expected "from" but found "{"
node_modules/react-native/Libraries/Utilities/codegenNativeComponent.js:13:12: ERROR: Expected "from" but found "{"
node_modules/react-native/index.js:14:7: ERROR: Unexpected "typeof"
at failureErrorWithLog (/home/joel/repos/just-one/node_modules/esbuild/lib/main.js:1650:15)
at /home/joel/repos/just-one/node_modules/esbuild/lib/main.js:1058:25
at /home/joel/repos/just-one/node_modules/esbuild/lib/main.js:1526:9
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
^Z
[2]+ Stopped npm run dev`

Can you help me?

[m-bert]

Hi! Does it happen after importing something from Gesture Handler? As far as I can see there's no error that points to Gesture Handler itself. Also, as far as I know, Vite is used for web applications, therefore it requires react-native-web - maybe that's the problem?