Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

`<UserButton.UserProfilePage>` is not showing when `__clerk_modal_state` is used to show modal

Offen
  • Stimmt etwas nicht?
#8,460 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
68/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
nextjs, react, typescript
Bereich
authentication, frontend

Rechercherichtung

Beginne mit der verlinkten Reproduktion und reproduziere das Verhalten von UserButton.UserProfilePage mithilfe der bereitgestellten __clerk_modal_state-URL. Verfolge die Verarbeitung dieses Modal-Zustands durch UserButton und UserProfilePage, prüfe anschließend, ob die benutzerdefinierte Seite wie erwartet angezeigt wird, und füge einen Regressionstest hinzu oder führe einen aus, der diesen URL-Ablauf abdeckt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

needs-triage
Preliminary Checks
Reproduction

https://github.com/jebibot/clerk-repro-1

Publishable key

pk_test_c2FjcmVkLWRvdmUtOC5jbGVyay5hY2NvdW50cy5kZXYk

Description

Steps to reproduce:

"use client";

import { UserButton } from "@clerk/nextjs";

export default function CustomUserButton() {
  return (
    <UserButton>
      <UserButton.UserProfilePage label="Custom Page" url="custom" labelIcon={<DotIcon />}>
        <CustomPage />
      </UserButton.UserProfilePage>
    </UserButton>
  );
}

"eyJwYXRoIjoiIiwiY29tcG9uZW50TmFtZSI6IlVzZXJQcm9maWxlIiwic3RhcnRQYXRoIjoiL3VzZXIiLCJzb2NpYWxQcm92aWRlciI6IiJ9"
  === btoa(JSON.stringify({path: "", componentName: "UserProfile", startPath: "/user", socialProvider: ""}))
  1. Log in
  2. Visit http://localhost:3000/?__clerk_modal_state=eyJwYXRoIjoiIiwiY29tcG9uZW50TmFtZSI6IlVzZXJQcm9maWxlIiwic3RhcnRQYXRoIjoiL3VzZXIiLCJzb2NpYWxQcm92aWRlciI6IiJ9

Expected behavior:

Image

Actual behavior:

Image
Environment
System:
    OS: Windows 11 10.0.26200
    CPU: (32) x64 AMD Ryzen 9 9950X3D 16-Core Processor          
    Memory: 6.92 GB / 61.52 GB
  Binaries:
    Node: 24.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.13.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.32.1 - C:\Users\y\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: 147.0.7727.103
    Edge: Chromium (147.0.3912.72)
    Firefox: 148.0.2 - C:\Program Files\Mozilla Firefox\firefox.exe
  npmPackages:
    @clerk/nextjs: ^7.3.0 => 7.3.0 
    @tailwindcss/postcss: ^4 => 4.2.4 
    @types/node: ^20 => 20.19.39 
    @types/react: ^19 => 19.2.14 
    @types/react-dom: ^19 => 19.2.3 
    eslint: ^9 => 9.39.4 
    eslint-config-next: 16.2.4 => 16.2.4 
    next: 16.2.4 => 16.2.4 
    react: 19.2.4 => 19.2.4 
    react-dom: 19.2.4 => 19.2.4 
    tailwindcss: ^4 => 4.2.4 
    typescript: ^5 => 5.9.3
Vorherrschende Sprache
TypeScript
Sterne
1.8k
Forks
473
Ø Merge
2 T. 13 Std.
Gemergte PRs (30 T.)
228

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus clerk/javascript

Alle Issues in clerk/javascript

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.