diff --git a/.changeset/fix-turbopack-ui-import.md b/.changeset/fix-turbopack-ui-import.md new file mode 100644 index 00000000000..05542f5d00f --- /dev/null +++ b/.changeset/fix-turbopack-ui-import.md @@ -0,0 +1,5 @@ +--- +'@clerk/nextjs': patch +--- + +Fix Turbopack compatibility for `ui` prop by adding `turbopackIgnore` magic comment alongside `webpackIgnore` on the dynamic `@clerk/ui/entry` import. This prevents both bundlers from statically resolving the optional dependency at build time. diff --git a/packages/nextjs/src/app-router/client/ClerkProvider.tsx b/packages/nextjs/src/app-router/client/ClerkProvider.tsx index cb26236acac..defc42f2f6e 100644 --- a/packages/nextjs/src/app-router/client/ClerkProvider.tsx +++ b/packages/nextjs/src/app-router/client/ClerkProvider.tsx @@ -95,11 +95,11 @@ const NextClientClerkProvider = (props: NextClerkProviderPr // the ClerkUI constructor is stripped (not serializable). Re-import it on the client. const uiProp = mergedProps.ui as { __brand?: string; ClerkUI?: unknown } | undefined; if (uiProp?.__brand && !uiProp?.ClerkUI) { - // webpackIgnore prevents the bundler from statically resolving @clerk/ui/entry at build time, + // webpackIgnore/turbopackIgnore prevent the bundler from statically resolving @clerk/ui/entry at build time, // since @clerk/ui is an optional dependency that may not be installed. - // @ts-expect-error - @clerk/ui/entry is resolved by the user's Next.js bundler at runtime, not at package build time + // @ts-expect-error - @clerk/ui is an optional peer dependency, not declared in this package's dependencies // eslint-disable-next-line import/no-unresolved - _resolvedClerkUI ??= import(/* webpackIgnore: true */ '@clerk/ui/entry').then( + _resolvedClerkUI ??= import(/* webpackIgnore: true */ /* turbopackIgnore: true */ '@clerk/ui/entry').then( (m: { ClerkUI: ClerkUIConstructor }) => m.ClerkUI, ); mergedProps.ui = { ...mergedProps.ui, ClerkUI: _resolvedClerkUI };