Expo: Anything inside ClerkLoaded component is not rendered

VidhyaKumar commented 1 year ago

[x] Review the documentation: https://docs.clerk.com/
[x] Search for existing issues: https://github.com/clerkinc/javascript/issues
[x] Go through package changelog files.
[x] 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:

Dependencies + versions

{  
  "dependencies": {
    "@clerk/clerk-expo": "^0.14.1",
    "@types/react": "~18.0.27",
    "expo": "~48.0.9",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-native": "0.71.4",
    "typescript": "^4.9.4",
    "react-native-safe-area-context": "4.5.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  }
}

Browser/OS

Hardware/OS: MacBook Air M1 (12.6.3)
Node (LTS): 18.15.0

Description

Following the official Clerk Expo documentation, this is my code block on a fresh Expo project.

import { ClerkProvider } from "@clerk/clerk-expo";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";

export default function App() {
    return (
        <ClerkProvider publishableKey="REMOVED_HERE">
            <SafeAreaProvider
                style={{
                    flex: 1,
                    justifyContent: "center",
                    alignItems: "center",
                }}
            >
                <Text>Hello world!</Text>
                <ClerkLoaded>
                    <Text>Open up App.tsx to start working on your app!</Text>
                </ClerkLoaded>
                <StatusBar style="auto" />
            </SafeAreaProvider>
        </ClerkProvider>
    );
}

Keep receiving the warning below and anything inside the ClerkLoaded component is not being rendered.

Screenshot_400

WARN  Possible Unhandled Promise Rejection (id: 0):
TypeError: Cannot read property 'href' of undefined
TypeError: Cannot read property 'href' of undefined
    at get (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:105093:137)
    at ?anon_0_ (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:105106:39)
    at next (native)
    at asyncGeneratorStep (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:4644:26)
    at _next (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:4663:29)
    at anonymous (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:4668:14)
    at tryCallTwo (/private/var/folders/yw/6bx918xn4671rggfcdxz7fph0000gn/T/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:61:9)
    at doResolve (/private/var/folders/yw/6bx918xn4671rggfcdxz7fph0000gn/T/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:216:25)
    at Promise (/private/var/folders/yw/6bx918xn4671rggfcdxz7fph0000gn/T/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:82:14)
    at anonymous (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:4660:25)
    at apply (native)
    at loadClerkJS (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:105152:36)
    at IsomorphicClerk (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:105077:28)
    at getOrCreateInstance (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:105223:71)
    at anonymous (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:104580:59)
    at mountMemo (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:69215:35)
    at useMemo (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:69527:31)
    at useMemo (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:6896:34)
    at useLoadedIsomorphicClerk (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:104579:50)
    at ClerkContextProvider (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:104485:57)
    at renderWithHooks (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:68618:33)
    at mountIndeterminateComponent (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:71148:34)
    at beginWork (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:72060:49)
    at beginWork$1 (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:75414:29)
    at performUnitOfWork (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:74927:29)
    at workLoopSync (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:74875:28)
    at renderRootSync (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:74857:25)
    at performSyncWorkOnRoot (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:74647:40)
    at flushSyncCallbacks (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:66022:36)
    at flushSyncCallbacksOnlyInLegacyMode (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:66007:29)
    at scheduleUpdateOnFiber (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:74355:47)
    at updateContainer (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:76414:32)
    at render (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:76925:24)
    at renderElement (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:2438:77)
    at renderApplication (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:48538:27)
    at run (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:48151:42)
    at runApplication (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:48202:28)
    at apply (native)
    at __callFunction (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:2826:36)
    at anonymous (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:2587:31)
    at __guard (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:2777:15)
    at callFunctionReturnFlushedQueue (http://192.168.0.72:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:2586:21)

dimkl commented 1 year ago

@VidhyaKumar thank you for reporting this issue. We have identified the root cause and are working on it.

VidhyaKumar commented 1 year ago

@dimkl brilliant, thank you for getting on top of it.

lleighton commented 1 year ago

thanks for swiftly fixing, any plans to publish the fixed versions?

dimkl commented 1 year ago

@lleighton we are going to release a version by the end of day. If it's blocking you could try to use the latest @staging version (but you should bear in mind that is not fully tested yet) but i would advise to wait for the latest production release.

PS: I will close this issue when the production release is published

lleighton commented 1 year ago

FYI this is still broken even with the fixes above on the staging release. Can I suggest you roll back to <0.12.9 - changes since then have introduced multiple issues.

dimkl commented 1 year ago

@lleighton could you provide the following information:

Did you use @clerk/clerk-expo@0.14.2-staging.0?

Did you came across the same issue?

TypeError: Cannot read property 'href' of undefined

Do you use expo@48 or expo@47?

We cannot rollback to @clerk/clerk-expo@0.12.9. You can always install and use a previous version of the @clerk/clerk-expo in your project.

Also i would like to note that ClerkJS currently does NOT officially support the expo@48 (expo@47 is suggested and used in our clerk-expo-starter project.

I will investigate it more and come back.

lleighton commented 1 year ago

Hi,

Yes used the latest staging version. The error is gone, but nothing is rendered inside the ClerkLoaded components.

we are on expo48 yes.

The problem with downgrading to older packages is that you have used the ^caret version on dependencies which means that npm always picks the latest minor or patch version on clerkjs or clerk-react :(

erquhart commented 1 year ago

@dimkl I've been using clerk successfully with Expo 48 until this issue - is there a timeline for supporting the latest version of Expo?

erquhart commented 1 year ago

@lleighton ah, good callout on the caret - I was rolling back and still getting failures. I'm going to have to install direct from an old lockfile to get unblocked for now.

SokratisVidros commented 1 year ago

This should be fixed at 0.14.2.

erquhart commented 1 year ago

@SokratisVidros confirmed, this fixed it for me - thank you!

nikosdouvlis commented 1 year ago

Thanks everyone for reporting, closing this one as its resolved :)

clerk / javascript