@clerk/nextjs: no subpath export for ClerkProvider, so the root barrel puts every UI component into an App Router app's first load
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Idoneità per principianti
- 56/100
- Tipo di issue
- Funzionalità
- Chiarezza
- Specificata chiaramente
- Stato di attività
- Attiva
- Stack tecnologico
- nextjs, react, typescript
- Ambito
- build-system, frontend, performance
Direzione di ricerca
Inizia ispezionando la package exports map e le voci esistenti di dist/esm/components.server.js e dist/esm/package.json, quindi confrontale con dist/esm/index.js. Aggiungi un subpath o un export react-server supportato per ClerkProvider e Show senza il UI barrel e verificalo con la misurazione dell’App Router production build descritta nell’issue.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
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.
- Lingua principale
- TypeScript
- Stelle
- 1.8k
- Fork
- 472
- Merge medio
- 2g 12h
- PR unite (30g)
- 222
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di clerk/javascript
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 74/100
clerk/javascript#9611 · 1 commento ·
-
clerk/javascript#9891 · 1 assegnatario ·
-
Difficoltà 4/5 3-5 giorni Idoneità per principianti 64/100
clerk/javascript#9775 · 1 commento ·
-
Difficoltà 4/5 3-5 giorni Idoneità per principianti 48/100
clerk/javascript#9770 · 3 commenti ·
-
Difficoltà 3/5 1-2 giorni Idoneità per principianti 68/100
clerk/javascript#9667 · 1 commento ·
Tutte le issue di clerk/javascript
Issue simili
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 84/100
receptron/mulmoterminal#2264 ·
-
documentation
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
components-web-app/docs#96 ·
-
enhancement
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
simonsobs/tileviewer#114 ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100