<UserButton />, <UserProfile /> not working for Remix on fresh install

[sam-brainstream]

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.io is not working and my repository is not public. I've put my source code below.

Publishable key

pk_test_YnJpZ2h0LXN3YW4tNDkuY2xlcmsuYWNjb3VudHMuZGV2JA

Description

Source code considering replayio is not working.

Steps to reproduce:

1. Install clerk/remix via pnpm into a fresh React Remix instance, or use the existing clerk-remix-quickstart repo.
2. Modify your root.tsx according to the Remix setup guide, and finish by wrapping app in ClerkApp.
3. Add <UserButton/> or <UserProfile /> anywhere in your application.

Expected behavior:
Appearance of any <User... component on the UI

Actual behavior:

An unexpected server error as shown above.

Environment

System:
    OS: macOS 15.0
    CPU: (10) arm64 Apple M2 Pro
    Memory: 587.13 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.9.0 - /opt/homebrew/bin/node
    npm: 10.8.3 - /opt/homebrew/bin/npm
    pnpm: 9.4.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.62
    Safari: 18.0
  npmPackages:
    @clerk/remix: ^4.2.52 => 4.2.52 
    @radix-ui/react-dialog: ^1.1.2 => 1.1.2 
    @radix-ui/react-separator: ^1.1.0 => 1.1.0 
    @radix-ui/react-slot: ^1.1.0 => 1.1.0 
    @radix-ui/react-tooltip: ^1.1.3 => 1.1.3 
    @remix-run/dev: ^2.14.0 => 2.14.0 
    @remix-run/node: ^2.14.0 => 2.14.0 
    @remix-run/react: ^2.14.0 => 2.14.0 
    @remix-run/serve: ^2.14.0 => 2.14.0 
    @types/node: ^22.9.0 => 22.9.0 
    @types/react: ^18.2.20 => 18.3.12 
    @types/react-dom: ^18.2.7 => 18.3.1 
    @typescript-eslint/eslint-plugin: ^6.7.4 => 6.21.0 
    @typescript-eslint/parser: ^6.7.4 => 6.21.0 
    autoprefixer: ^10.4.20 => 10.4.20 
    class-variance-authority: ^0.7.0 => 0.7.0 
    clsx: ^2.1.1 => 2.1.1 
    eslint: ^8.38.0 => 8.57.1 
    eslint-import-resolver-typescript: ^3.6.1 => 3.6.3 
    eslint-plugin-import: ^2.28.1 => 2.31.0 
    eslint-plugin-jsx-a11y: ^6.7.1 => 6.10.2 
    eslint-plugin-react: ^7.33.2 => 7.37.2 
    eslint-plugin-react-hooks: ^4.6.0 => 4.6.2 
    isbot: ^4.1.0 => 4.4.0 
    lucide-react: ^0.456.0 => 0.456.0 
    postcss: ^8.4.38 => 8.4.49 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    react-resizable-panels: ^2.1.6 => 2.1.6 
    tailwind-merge: ^2.5.4 => 2.5.4 
    tailwindcss: ^3.4.14 => 3.4.14 
    tailwindcss-animate: ^1.0.7 => 1.0.7 
    typescript: ^5.1.6 => 5.6.3 
    vite: ^5.1.0 => 5.4.11 
    vite-tsconfig-paths: ^4.2.1 => 4.3.2

[anagstef]

Hello @sam-brainstream! It seems like you use the <UserButton /> component outside the Clerk context (ClerkApp). The <UserButton /> needs to be placed in any component that lives on a nested layout/page/component, or inside the App component in this example.