Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#8,460 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
68/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
nextjs, react, typescript
Lĩnh vực
authentication, frontend

Hướng nghiên cứu

Bắt đầu với bản tái hiện được liên kết và tái hiện hành vi của UserButton.UserProfilePage bằng URL __clerk_modal_state được cung cấp. Theo dõi cách UserButton và UserProfilePage xử lý trạng thái modal đó, sau đó xác minh rằng trang tùy chỉnh được hiển thị như mong đợi và thêm hoặc chạy một bài kiểm thử hồi quy bao quát luồng URL này.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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
Ngôn ngữ chính
TypeScript
Star
1.8k
Fork
473
Merge trung bình
2 ngày 13 giờ
Pull request đã merge (30 ngày)
228

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của clerk/javascript

Tất cả issue của clerk/javascript

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.