React useAuth / useUser context don't work in Vite projets (HMR issue)

[AndreasGalster2]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction / Replay Link

https://stackblitz.com/edit/vitejs-vite-jnusqg?file=src%2FApp.tsx,package.json&terminal=dev

Publishable key

pk_test_Y2xldmVyLXNxdWlycmVsLTU5LmNsZXJrLmFjY291bnRzLmRldiQ

Description

Steps to reproduce:

https://stackblitz.com/edit/vitejs-vite-jnusqg?file=src%2FApp.tsx,package.json&terminal=dev

1. Install Vite (I used React template)

• npm create vite@latest my-react-app -- --template react

2. Copy / paste basic React example from the docs with useAuth or useUser context
3. Cannot find context on page load

Expected behavior:

No errors and being able to retrieve the auth / user context

Actual behavior:

Error: UserContext not found
    at assertContextExists

I only briefly looked into the issue. This used to be a HMR issue on Vite for a while that Context wouldn't work, but it's been fixed roughly a year ago. I assume this has to do with the fact that there are some custom wrappers for Context Creation. I tried a normal CreateContext / useContext example in the same app and it works without issues.

PS: I'm not confirming it's a HMR issue. I just stumbled upon this issue vitejs/vite#3301 which appears to be very similar, and I assume since useAuth / useUser are React context, it must be related.

Environment

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 5.01 GB / 7.62 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.18.2/bin/yarn
    npm: 10.2.0 - ~/.nvm/versions/node/v18.18.2/bin/npm
    pnpm: 8.10.5 - ~/.nvm/versions/node/v18.18.2/bin/pnpm
    Watchman: 2023.10.09.00 - /home/linuxbrew/.linuxbrew/bin/watchman
  npmPackages:
    @clerk/clerk-react: ^4.28.0 => 4.28.0
    @types/react: ^18.2.15 => 18.2.37
    @types/react-dom: ^18.2.7 => 18.2.15
    @typescript-eslint/eslint-plugin: ^6.0.0 => 6.11.0
    @typescript-eslint/parser: ^6.0.0 => 6.11.0
    @vitejs/plugin-react: ^4.1.1 => 4.1.1
    eslint: ^8.45.0 => 8.53.0
    eslint-plugin-react-hooks: ^4.6.0 => 4.6.0
    eslint-plugin-react-refresh: ^0.4.3 => 0.4.4
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    react-router-dom: ^6.18.0 => 6.18.0
    typescript: ^5.0.2 => 5.2.2
    vite: ^4.5.0 => 4.5.0

[jescalan]

Hey @AndreasGalster2 - we looked into this and noticed that you are calling useUser outside the context of the <ClerkProvider> component. In order for useUser to render correctly, it needs to be called inside a component that is wrapped with <ClerkProvider>.

We certainly could do a better job with this error message, and are adding a task for this in our internal backlog, but this should be able to be resolved in your app by adjusting the scope of <ClerkProvider> right away 😁

[AndreasGalster2]

Ohh, how did I not see that? I should have definitely caught that, my bad, thanks a lot for the help!