Clerk Expo errors/not working on all platforms and versions.

Motoxpro commented 1 year ago

[ ] Review the documentation: https://docs.clerk.dev/
[ ] Search for existing issues: https://github.com/clerkinc/javascript/issues
[ ] Go through package changelog files.
[ ] Provide the Frontend API key from your application dashboard.

Package + Version

[ ] @clerk/clerk-js
[ ] @clerk/clerk-react
[ ] @clerk/nextjs
[ ] @clerk/remix
[ ] @clerk/types
[ ] @clerk/themes
[ ] @clerk/localizations
[ X ] @clerk/clerk-expo
[ ] @clerk/backend
[ ] @clerk/clerk-sdk-node
[ ] @clerk/shared
[ ] @clerk/fastify
[ ] gatsby-plugin-clerk
[ ] build/tooling/chore
[ ] other:

Version:

0.12.5

Browser/OS

All

Description

App.js (1247:889)
Can't find variable: EventTarget
(Device)
  Evaluating module://@clerk/clerk-expo.js
  Evaluating module://App.js.js

This error happens on all platforms, on my local computer, with all package versions, etc. Not sure I am doing something wrong but I have attached an extremely basic sandbox.

https://snack.expo.dev/@eliotjackson/mature-popcorn

The clerk-expo-starter repo has the same problem. I've gone through all the clerk-expo versions back to .0.8.

Also tried what was suggested here

We have reproduced it locally and are working on a fix.

⚠️ Meanwhile, you can try using @clerk/clerk-expo@0.12.4 which is the latest working version. ⚠️

The problematic 0.12.5 version has been unpublished.

Update: It seems like it only happens on the first load. So if I comment out all entry points to anything Clerk at the root of my app, reload it (r) and then uncomment and let it fast refresh, everything works as it should.

SokratisVidros commented 1 year ago

@Motoxpro This must be due to an Expo cached build. Version 0.12.4 should work as expected. I am gonna close this and the updates about the fix will be posted on https://github.com/clerkinc/javascript/issues/870.

Motoxpro commented 1 year ago

Thanks @SokratisVidros. Were you able to get 0.12.4 to work in the snack? https://snack.expo.dev/@eliotjackson/mature-popcorn I have tried it on multiple computers, snacks, etc. and I wasn't able to get 0.12.4 working either.

I've done new expo builds and cleared my npm cache and expo cache

SokratisVidros commented 1 year ago

I used https://github.com/clerkinc/clerk-expo-starter in a local IOS simulator.

Motoxpro commented 1 year ago

@SokratisVidros I'm sorry to be a bother, but could you check the snack? Only added 2 lines of code from the basic starter. This is the smallest reproducible sample I can make (literally just adding ClerkProvider).

sgrund14 commented 1 year ago

@SokratisVidros I'm getting 0.12.4 working, but only with the shim you suggested on the other issue

import { Event, EventTarget } from 'event-target-shim';

if (!global.EventTarget) {
    global.EventTarget = EventTarget;
}

if (!global.Event) {
    global.Event = Event;
}

it doesn't work otherwise

SokratisVidros commented 1 year ago

The Snack is broken for me with a react-native error.

The above polyfill doesn't fully work. That's why I removed it from the comment.

sgrund14 commented 1 year ago

hmm. I get the EventTarget error without it, but it the error clears and the project builds with it

SokratisVidros commented 1 year ago

Can you please clone https://github.com/clerkinc/clerk-expo-starter locally and try again?

sgrund14 commented 1 year ago

yea i can try, but why would this be happening in my actual project? I have a turbo monorepo setup with an expo workspace, and the problem is only solved with the shim.

SokratisVidros commented 1 year ago

Can you run npm why @clerk/clerk-expo in the repo? What's the output?

sgrund14 commented 1 year ago

@clerk/clerk-expo@0.12.4
node_modules/@clerk/clerk-expo
  @clerk/clerk-expo@"^0.12.4" from studio-app@0.0.24
  packages/studio-app
    studio-app@0.0.24
    node_modules/studio-app
      studio-app@"*" from studio-native@0.1.1
      apps/studio-native
        studio-native@0.1.1
        node_modules/studio-native
          workspace apps/studio-native from the root project
      studio-app@"*" from studio-web@0.1.1
      apps/studio-web
        studio-web@0.1.1
        node_modules/studio-web
          workspace apps/studio-web from the root project
      workspace packages/studio-app from the root project
  @clerk/clerk-expo@"^0.12.4" from studio-native@0.1.1
  apps/studio-native
    studio-native@0.1.1
    node_modules/studio-native
      workspace apps/studio-native from the root project

i have a app/studio-native, an expo project with clerk/clerk-expo: ^.0.12.4 and a package/studio-app, an internal package used in the expo project with clerk/clerk-expo: ^.0.12.4

SokratisVidros commented 1 year ago

Thanks, this is helpful. I see what's happening. Can you please try adding "@clerk/clerk-js: "4.27.2" to your package.json, remove the polyfill and try again?

sgrund14 commented 1 year ago

ok, tried adding this and the EventTarget error is back :(

for some reason though, in my yarn.lock file, there is a resolution to version 4.28.1

"@clerk/clerk-js@npm:^4.27.2":
  version: 4.28.1
  resolution: "@clerk/clerk-js@npm:4.28.1"
  dependencies:
    "@clerk/localizations": ^1.5.1
    "@clerk/shared": ^0.12.1
    "@clerk/types": ^3.28.3
    "@emotion/cache": 11.10.5
    "@emotion/react": 11.10.5
    "@floating-ui/react": 0.19.0
    browser-tabs-lock: 1.2.15
    copy-to-clipboard: 3.3.3
    core-js: 3.26.1
    dequal: 2.0.3
    qrcode.react: 3.1.0
    qs: 6.11.0
    react: 18.2.0
    react-dom: 18.2.0
    regenerator-runtime: 0.13.11
  checksum: 531561e8370e81a95d0abd08ec713058723b310208c1ccec2d36a71c27c5ba2f080de6777aed373e439f31dd16ad2bccc63a23dc36530420badcf530d9da1694
  languageName: node
  linkType: hard

results of npm why @clerk/clerk-js:

@clerk/clerk-js@4.27.2
node_modules/@clerk/clerk-js
  @clerk/clerk-js@"4.27.2" from studio-native@0.1.1
  apps/studio-native
    studio-native@0.1.1
    node_modules/studio-native
      workspace apps/studio-native from the root project
  @clerk/clerk-js@"4.27.2" from studio-app@0.0.24
  packages/studio-app
    studio-app@0.0.24
    node_modules/studio-app
      studio-app@"*" from studio-native@0.1.1
      apps/studio-native
        studio-native@0.1.1
        node_modules/studio-native
          workspace apps/studio-native from the root project
      studio-app@"*" from studio-web@0.1.1
      apps/studio-web
        studio-web@0.1.1
        node_modules/studio-web
          workspace apps/studio-web from the root project
      workspace packages/studio-app from the root project

@clerk/clerk-js@4.28.1
node_modules/@clerk/clerk-expo/node_modules/@clerk/clerk-js
  @clerk/clerk-js@"^4.27.2" from @clerk/clerk-expo@0.12.4
  node_modules/@clerk/clerk-expo
    @clerk/clerk-expo@"^0.12.4" from studio-native@0.1.1
    apps/studio-native
      studio-native@0.1.1
      node_modules/studio-native
        workspace apps/studio-native from the root project
    @clerk/clerk-expo@"^0.12.4" from studio-app@0.0.24
    packages/studio-app
      studio-app@0.0.24
      node_modules/studio-app
        studio-app@"*" from studio-native@0.1.1
        apps/studio-native
          studio-native@0.1.1
          node_modules/studio-native
            workspace apps/studio-native from the root project
        studio-app@"*" from studio-web@0.1.1
        apps/studio-web
          studio-web@0.1.1
          node_modules/studio-web
            workspace apps/studio-web from the root project
        workspace packages/studio-app from the root project

SokratisVidros commented 1 year ago

That's why the error is back. The error occurs in ClerkJS 4.28.X. Unfortunately, we are using the ^ in the package.json of @clerk/clerk-expo, so the package will resolve to the latest 4.28.X version by default until we ship a proper fix.

You can use yarn resolutions to pin @clerk/clerk-js to the 4.27.2 version.

sgrund14 commented 1 year ago

aha, ok! added a resolution to "@clerk/clerk-js": "4.27.2" in my root package.json and the error is gone without the polyfill 😄 thanks much

SokratisVidros commented 1 year ago

Glad it's working now and apologies for the hassle. We will ship the proper fix ASAP.

Motoxpro commented 1 year ago

Ahhh amazing!! Thank you @SokratisVidros @sgrund14 !!

I have never been more confused in my life haha.

Just as a heads up in case someone else finds this thread before the fix and couldn't follow. For now, you need to EXPLICITLY set "@clerk/clerk-js": "4.27.2" in your package.json because otherwise, it resolves to the latest version which is broken. This is why I could go all the way back to .0.8.1 and it still wouldn't work/

clerk / javascript