clerk / javascript

Official Javascript repository for Clerk authentication
https://clerk.com
MIT License
1.02k stars 231 forks source link

"Uncaught Error: Rendered fewer hooks than expected" during signout #2267

Closed kylegwalsh closed 8 months ago

kylegwalsh commented 8 months ago

Preliminary Checks

Reproduction / Replay Link

https://drive.google.com/file/d/1aTBuCxsLnaQOur4hY_VJRHoA5hH0MjAB/view?usp=sharing

Publishable key

pk_test_Y2xlcmsuY3Jpc3Auc2Vhc25haWwtOTEubGNsLmRldiQ

Description

To start, I started seeing the following error when the user signs out:

"Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks"

I tracked the error down to the following line of code in the ClerkContextProvider.js:

  React.useEffect(() => {
    return clerk.addListener((e) => setState({ ...e }));
  }, []);

Perhaps the listener is being skipped once during signout?

This issue randomly popped up over this past weekend without any code changes. This leads me to believe it either relates to a change at the iOS level or a backend change on the clerk side that is somehow detached from the version of clerk-expo (it happens in both the 0.10.6 and 0.19.22 clerk-expo versions)?

This issue seems to only impact native apps (I tested on iOS) - not web.

Steps to reproduce:

  1. Wrap the app in the
  2. Sign the user in
  3. Log the user out with the useSignOut() hook

Expected behavior:

The user should sign out without any errors and be able to log back in. This is how it behaved for the past 6 months without issues.

Actual behavior:

The app will crash and trigger its error boundary with the aforementioned error message.

Environment

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1
    Memory: 434.08 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 3.2.2 - /opt/homebrew/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
    pnpm: 8.7.4 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 119.0.6045.199
    Safari: 16.4
  npmPackages:
    @babel/core: ^7.20.0 => 7.22.1 
    @babel/plugin-proposal-export-namespace-from: 7.18.9 => 7.18.9 
    @clerk/clerk-expo: 0.19.22 => 0.19.22 
    @expo/vector-icons: ^13.0.0 => 13.0.0 
    @floating-ui/react-native: 0.8.2 => 0.8.2 
    @formatjs/intl-locale: 2.4.41 => 2.4.41 
    @formatjs/intl-numberformat: 7.3.0 => 7.3.0 
    @formatjs/intl-pluralrules: 4.2.0 => 4.2.0 
    @gorhom/bottom-sheet: 4.4.5 => 4.4.5 
    @hlp/analytics: 1.0.0 => 1.0.0 
    @hlp/assets: 1.0.0 => 1.0.0 
    @hlp/backend: 1.0.0 => 1.0.0 
    @hlp/components: 1.0.0 => 1.0.0 
    @hlp/config: 1.0.0 => 1.0.0 
    @hlp/core: 1.0.0 => 1.0.0 
    @hlp/expo-plugins: 1.0.0 => 1.0.0 
    @hlp/hooks: 1.0.0 => 1.0.0 
    @hlp/theme: 1.0.0 => 1.0.0 
    @hookform/resolvers: 2.9.7 => 2.9.7 
    @react-native-aria/checkbox: 0.2.3 => 0.2.3 
    @react-native-async-storage/async-storage: 1.17.11 => 1.17.11 
    @react-native-community/netinfo: 9.3.7 => 9.3.7 
    @react-navigation/bottom-tabs: 6.3.2 => 6.3.2 
    @react-navigation/devtools: 6.0.8 => 6.0.8 
    @react-navigation/drawer: 6.5.0 => 6.5.0 
    @react-navigation/native: 6.0.8 => 6.0.8 
    @react-navigation/native-stack: 6.5.0 => 6.5.0 
    @react-navigation/stack: 6.2.2 => 6.2.2 
    @react-stately/checkbox: 3.3.1 => 3.3.1 
    @rnmapbox/maps: 10.0.0-beta.58 => 10.0.0-beta.58 
    @segment/analytics-react-native: 2.7.1 => 2.7.1 
    @segment/sovran-react-native: 0.4.4 => 0.4.4 
    @sentry/react-native: 4.13.0 => 4.13.0 
    @shopify/flash-list: 1.4.0 => 1.4.0 
    @shopify/react-native-skia: 0.1.190 => 0.1.190 
    @tanstack/react-query: 4.2.3 => 4.2.3 
    @trpc/client: 10.0.0-proxy-beta.19 => 10.0.0-proxy-beta.19 
    @trpc/react: 10.0.0-proxy-beta.19 => 10.0.0-proxy-beta.19 
    @types/aws-lambda: 8.10.101 => 8.10.101 
    @types/chroma-js: 2 => 2.4.0 
    @types/number-to-words: 1 => 1.2.1 
    @types/numeral: ^2 => 2.0.5 
    @types/react-helmet: 6 => 6.1.6 
    @types/react-native-typing-animation: 0.1.0 => 0.1.0 
    asyncstorage-down: 4.2.0 => 4.2.0 
    babel-plugin-module-resolver: 4.1.0 => 4.1.0 
    chroma-js: 2.4.2 => 2.4.2 
    date-fns: 2.29.3 => 2.29.3 
    eslint: 8.27.0 => 8.27.0 
    expo: ~48.0.21 => 48.0.21 
    expo-application: ~5.1.1 => 5.1.1 
    expo-asset: ~8.9.1 => 8.9.2 
    expo-auth-session: ~4.0.3 => 4.0.3 
    expo-av: ~13.2.1 => 13.2.1 
    expo-build-properties: ~0.6.0 => 0.6.0 
    expo-constants: ~14.2.1 => 14.2.1 
    expo-dev-client: ~2.2.1 => 2.2.1 
    expo-device: ~5.2.1 => 5.2.1 
    expo-document-picker: ~11.2.2 => 11.2.2 
    expo-file-system: ~15.2.2 => 15.2.2 
    expo-linear-gradient: ~12.1.2 => 12.1.2 
    expo-linking: ~4.0.1 => 4.0.1 
    expo-local-authentication: ~13.3.0 => 13.3.0 
    expo-localization: ~14.1.1 => 14.1.1 
    expo-location: ~15.1.1 => 15.1.1 
    expo-modules-core: ~1.2.7 => 1.2.7 
    expo-navigation-bar: ~2.1.1 => 2.1.1 
    expo-notifications: ~0.18.1 => 0.18.1 
    expo-router: 0.0.36 => 0.0.36 
    expo-secure-store: ~12.1.1 => 12.1.1 
    expo-sharing: ~11.2.2 => 11.2.2 
    expo-splash-screen: ~0.18.2 => 0.18.2 
    expo-status-bar: ~1.4.4 => 1.4.4 
    expo-store-review: ~6.2.1 => 6.2.1 
    expo-system-ui: ~2.2.1 => 2.2.1 
    expo-updates: ~0.16.4 => 0.16.4 
    expo-web-browser: ~12.1.1 => 12.1.1 
    expo-yarn-workspaces: 2.0.2 => 2.0.2 
    lottie-react-native: 5.1.4 => 5.1.4 
    moti: 0.20.0 => 0.20.0 
    native-base: v3.4.28 => 3.4.28 
    node-libs-react-native: 1.2.1 => 1.2.1 
    number-to-words: 1.2.4 => 1.2.4 
    numeral: 2.0.6 => 2.0.6 
    posthog-react-native: 2.1.0 => 2.1.0 
    react: 18.2.0 => 18.1.0 
    react-date-picker: 9.0.0 => 9.0.0 
    react-dom: 18.2.0 => 18.1.0 
    react-error-overlay: 6.0.9 => 6.0.9 
    react-helmet: 6.1.0 => 6.1.0 
    react-map-gl: 7.0.19 => 7.0.19 
    react-native: 0.71.14 => 0.71.14 
    react-native-appsflyer: 6.12.2 => 6.12.2 
    react-native-awesome-alerts: 2.0.0 => 2.0.0 
    react-native-bundle-visualizer: 3.1.1 => 3.1.1 
    react-native-confetti-cannon: 1.5.2 => 1.5.2 
    react-native-date-picker: 4.2.5 => 4.2.5 
    react-native-email-link: 1.14.3 => 1.14.3 
    react-native-fast-image: 8.5.11 => 8.5.11 
    react-native-gesture-handler: ~2.9.0 => 2.9.0 
    react-native-get-random-values: ~1.8.0 => 1.8.0 
    react-native-gifted-charts: 1.3.12 => 1.3.12 
    react-native-gifted-chat: 1.1.1 => 1.1.1 
    react-native-hyperlink: 0.0.22 => 0.0.22 
    react-native-linear-gradient: 2.8.3 => 2.8.3 
    react-native-lottie: 0.0.1-alpha.2 => 0.0.1-alpha.2 
    react-native-mask-input: 1.2.2 => 1.2.2 
    react-native-mmkv: 2.8.0 => 2.8.0 
    react-native-monorepo-tools: 1.2.0 => 1.2.0 
    react-native-plaid-link-sdk: 10.3.0 => 10.3.0 
    react-native-popper: 0.3.2 => 0.3.2 
    react-native-reanimated: 3.3.0 => 3.3.0 
    react-native-redash: 18.1.0 => 18.1.0 
    react-native-safe-area-context: 4.5.0 => 4.5.0 
    react-native-screens: ~3.20.0 => 3.20.0 
    react-native-svg: 13.14.0 => 13.14.0 
    react-native-swiper-flatlist: 3.0.17 => 3.0.17 
    react-native-toast-message: 2.1.5 => 2.1.5 
    react-native-typing-animation: 0.1.7 => 0.1.7 
    react-native-web: ~0.18.11 => 0.18.12 
    react-native-webview: 13.2.2 => 13.2.2 
    react-plaid-link: 3.4.0 => 3.4.0 
    react-select: 5.6.0 => 5.6.0 
    recharts: 2.9.0 => 2.9.0 
    rn-nodeify: 10.3.0 => 10.3.0 
    sentry-expo: ~6.1.0 => 6.1.1 
    smartlook-react-native-wrapper: 1.2.8 => 1.2.8 
    superjson: 1.9.1 => 1.9.1 
    ts-node: 10.9.1 => 10.9.1 
    zod: 3.20.2 => 3.20.2
kylegwalsh commented 8 months ago

I rolled my codebase way back and it seemed to start working again. Perhaps there is another confounding factor that was introduced a few weeks ago but didn't show up until recently. I'll continue to look into this issue on my end.