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/nextjs: no subpath export for ClerkProvider, so the root barrel puts every UI component into an App Router app's first load

Đang mở
  • Có gì không ổn?
#9,476 2 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
56/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả 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 package exports map và các entry hiện có trong dist/esm/components.server.js và dist/esm/package.json, sau đó so sánh chúng với dist/esm/index.js. Thêm một subpath hoặc export react-server được hỗ trợ cho ClerkProvider và Show mà không có UI barrel, rồi xác minh bằng phép đo App Router production build được mô tả trong issue.

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

Mô tả

Package

@clerk/[email protected] (re-checked against 7.7.7 — unchanged)

What

An App Router root layout must import ClerkProvider, and the only supported specifier is the root barrel:

// app/layout.tsx — a Server Component
import { ClerkProvider } from "@clerk/nextjs";

dist/esm/index.js statically imports three "use client" modules — client-boundary/uiComponents, client-boundary/controlComponents, client-boundary/hooks — alongside the provider. A Server Component importing a "use client" barrel registers every export of that barrel as a client reference, whether or not it renders them. So an app that renders one <UserButton> ships the client wrappers for PricingTable, OrganizationProfile, OrganizationSwitcher, APIKeys, Waitlist and the rest, on every route.

The package's own exports map has no client-component subpath and no wildcard:

".", "./server", "./errors", "./internal", "./webhooks", "./experimental", "./legacy", "./types"

/internal is not an alternative — it imports client-boundary/uiComponents itself.

The provider is already clean internally

ClerkProvider resolves through the package-private #components condition (declared in dist/esm/package.json) to dist/esm/components.server.js, which imports none of the UI modules:

// dist/esm/components.server.js
import { ClerkProvider } from "./app-router/server/ClerkProvider";
import { Show } from "./app-router/server/controlComponents";

A specifier landing there would give an App Router app the provider without the UI barrel. There just isn't one — #components is package-private and the root exports map has no wildcard.

Measured

Nine cold production builds of a Next.js 16 App Router app (Turbopack, Cache Components), NEXT_SERVER_ACTIONS_ENCRYPTION_KEY pinned so builds are byte-comparable; the reverted tree rebuilt byte-identical to the baseline:

configuration total client JS (gz) Δ
as shipped today 579,569 —
provider aliased to components.server.js + every Clerk component behind one client module 574,801 −4,768

That −4,768 gz (0.82% of the app's client JS) is what a supported subpath would buy for free. Reaching it today needs a bundler alias onto dist/esm/components.server.js — a path outside your exports map, through a condition the alias bypasses — which we measured, priced and then declined to ship: a rename on your side fails our build loudly (fine), but a content change fails nothing and would land at runtime in the root layout of every page.

Ask

A supported subpath that exports ClerkProvider (and Show) without the client-component barrel — e.g. @clerk/nextjs/provider, or simply exposing what #components already resolves to under the react-server condition. Naming it in exports is most of the work; the module exists.

Related

Filed alongside a request for sideEffects: false on @clerk/react and @clerk/shared, which is the other half — with a subpath but without that flag, @clerk/react's rollup-merged dist still carries the UI implementations into the provider's chunk.

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

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.