clerk / javascript

Official JavaScript repository for Clerk authentication
https://clerk.com
MIT License
1.15k stars 259 forks source link

clerk-expo is throwing `TypeError: window.addEventListener is not a function (it is undefined), js engine: hermes` #4084

Closed homanp closed 2 months ago

homanp commented 2 months ago

Preliminary Checks

Reproduction

https://github.com/superagent-ai/qms-app

Publishable key

pk_test_ZmxlZXQtdGVybWl0ZS05OS5jbGVyay5hY2NvdW50cy5kZXYk

Description

Steps to reproduce:

  1. Follow the setup guide in Clerk docs
  2. Install dependencies
  3. Start server
  4. Launch iOS emulator

Expected behavior:

Should not throw windowEventListener errors as we are not in a browser env.

Actual behavior:

Throws windowEvenetListener error.

Environment

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M2
    Memory: 156.44 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.3.1 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - /opt/homebrew/bin/npm
  Browsers:
    Safari: 17.6
  npmPackages:
    @babel/core: ^7.20.0 => 7.25.2
    @clerk/clerk-expo: ^2.2.6 => 2.2.6
    @expo/metro-runtime: ~3.2.3 => 3.2.3
    @expo/vector-icons: ^14.0.2 => 14.0.2
    @react-navigation/native: ^6.0.2 => 6.1.18
    @types/jest: ^29.5.12 => 29.5.12
    @types/react: ~18.2.45 => 18.2.79
    @types/react-test-renderer: ^18.0.7 => 18.3.0
    expo: ~51.0.28 => 51.0.31
    expo-constants: ~16.0.2 => 16.0.2
    expo-font: ~12.0.9 => 12.0.9
    expo-linking: ~6.3.1 => 6.3.1
    expo-router: ~3.5.23 => 3.5.23
    expo-secure-store: ^13.0.2 => 13.0.2
    expo-splash-screen: ~0.27.5 => 0.27.5
    expo-status-bar: ~1.12.1 => 1.12.1
    expo-system-ui: ~3.0.7 => 3.0.7
    expo-web-browser: ~13.0.3 => 13.0.3
    jest: ^29.2.1 => 29.7.0
    jest-expo: ~51.0.3 => 51.0.4
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    react-native: 0.74.5 => 0.74.5
    react-native-gesture-handler: ~2.16.1 => 2.16.2
    react-native-reanimated: ~3.10.1 => 3.10.1
    react-native-safe-area-context: 4.10.5 => 4.10.5
    react-native-screens: 3.31.1 => 3.31.1
    react-native-web: ~0.19.10 => 0.19.12
    react-test-renderer: 18.2.0 => 18.2.0
    typescript: ~5.3.3 => 5.3.3
homanp commented 2 months ago

Followed the setup guide and the minimal example template you provided: https://github.com/clerk/clerk-expo-quickstart

Getting this error when running npm run start in the iOS simulator.

Recorded a Loom for it as well: https://www.loom.com/share/83405ef6a2924071af97050133aadf5c

Please advise

Full trace:

 ERROR  TypeError: window.addEventListener is not a function (it is undefined), js engine: hermes
    at ContextNavigator (http://192.168.86.245:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:145630:24)
    at ExpoRoot (http://192.168.86.245:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:145586:28)
    at App
    at ErrorToastContainer (http://192.168.86.245:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:234398:24)
    at ErrorOverlay
    at withDevTools(ErrorOverlay) (http://192.168.86.245:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:233901:27)
    at RCTView
    at View (http://192.168.86.245:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:41520:43)
    at RCTView
    at View (http://192.168.86.245:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:41520:43)
    at AppContainer (http://192.168.86.245:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:41363:25)
    at main(RootComponent) (http://192.168.86.245:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:119719:28)
MatteoUrso commented 2 months ago

+1

mr-ryan-james commented 2 months ago

I'm also seeing this, is it just version 2.2.6 ? Downgrading to 2.2.5 fixed the issue for me

wobsoriano commented 2 months ago

~@mr-ryan-james @homanp can you confirm that 2.2.5 fixes the issue? I tried it locally starting from 2.1.1 - 2.2.5 and still getting it.~ Looks like a cache issue on my end and can confirm 2.2.5 works. We're actively investigating and will provide an update as soon as possible! Thank you

wobsoriano commented 2 months ago

Hi @homanp, can you set your clerkJSVersion to 5.18.0 and see if it fixes the issue? Thanks!

<ClerkProvider clerkJSVersion="5.18.0" publishableKey={publishableKey}>
  <Slot />
</ClerkProvider>

Edit: Please see comment above

homanp commented 2 months ago

I'm also seeing this, is it just version 2.2.6 ? Downgrading to 2.2.5 fixed the issue for me

Will try

wobsoriano commented 2 months ago

Fixed in https://github.com/clerk/javascript/pull/4095. Should be available in the next release.

Please use @clerk/clerk-expo@2.2.5 for now 🫡

homanp commented 2 months ago

Fixed in #4095. Should be available in the next release.

Please use @clerk/clerk-expo@2.2.5 for now 🫡

First class support

wobsoriano commented 2 months ago

Hi everyone! The fix is available now on @clerk/clerk-expo@2.2.8. We appreciate your patience!