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

@clerk/react and @clerk/shared do not declare sideEffects: false, which blocks tree-shaking through ClerkProvider

Đã đóng
  • Có gì không ổn?
#9,475 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ó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
48/100
Loại issue
Tính năng
Độ 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
build-system, frontend, performance

Hướng nghiên cứu

Bắt đầu bằng cách kiểm tra các package manifest đã phát hành của @clerk/react và @clerk/shared, sau đó truy vết cách @clerk/react tạo ra dist/ClerkProvider-CNl0Jmp6.mjs. Xác minh xem các package có không có side effect hay không và provider được hợp nhất với các thành phần UI như thế nào. Công việc được xem là hoàn tất khi metadata chính xác và, nếu tiếp tục theo hướng này, provider không còn kéo theo mã UI không liên quan; chạy lại phép đo production bundle đã được báo cáo.

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

Mô tả

Stale
Package

@clerk/[email protected], @clerk/[email protected] (reached via @clerk/[email protected])

What

@clerk/nextjs declares "sideEffects": false. Neither of the two packages it stands on does — @clerk/react and @clerk/shared both omit the field entirely, so a bundler must assume every module in them has side effects and cannot drop unreachable exports.

$ node -e "for (const p of ['@clerk/react','@clerk/shared','@clerk/nextjs'])
  console.log(p, require(p+'/package.json').sideEffects)"
@clerk/react   undefined
@clerk/shared  undefined
@clerk/nextjs  false
Why it matters downstream

Measured on a Next.js 16 App Router app (Turbopack, Cache Components, @clerk/[email protected]), across nine cold production builds:

  • @clerk/nextjs puts 66,806 bytes gzipped into first load, on every route, because ClerkProvider lives in the root layout.
  • With every Clerk UI component deleted from the app — no <UserButton>, no <SignIn>, no <SignUp> — and the provider resolved past the root barrel, 51,910 gz still remains. That is the floor: ClerkProvider alone.

Two things put it there, and the sideEffects gap is one:

  1. No sideEffects: false on @clerk/react / @clerk/shared, so nothing unreachable can be dropped.
  2. @clerk/react's dist is rollup-merged — dist/ClerkProvider-CNl0Jmp6.mjs is a single 59,673-byte file holding the provider and the UI component implementations. Even with sideEffects: false, importing the provider pulls that whole file, because the merge happened at publish time rather than at the consumer's bundler.

So (1) alone is necessary but may not be sufficient — (2) would need the provider split out of the shared chunk for the flag to actually pay. Both together are what would let an app that renders one avatar stop shipping the code for PricingTable, OrganizationProfile, OrganizationSwitcher and the rest.

Ask

Declare "sideEffects": false in @clerk/react and @clerk/shared if it holds (both look side-effect-free from the outside — they are component/hook/util modules), and, if you're open to it, split ClerkProvider out of the merged dist chunk so the flag has something to act on.

Happy to re-run the measurement against a canary if that's useful.

Related

Filed alongside a request for a client-component subpath export on @clerk/nextjs, which is the other half of the same problem for App Router apps.

Ngôn ngữ chính
TypeScript
Star
1.8k
Fork
473
Merge trung bình
2 ngày 3 giờ
Pull request đã merge (30 ngày)
269

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.