diff --git a/.changeset/puny-pants-cough.md b/.changeset/puny-pants-cough.md new file mode 100644 index 00000000000..b0c4f2f42cf --- /dev/null +++ b/.changeset/puny-pants-cough.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Throw error in development when opening `` without a session. diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 927881bf913..5f96d87910c 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -554,6 +554,15 @@ export class Clerk implements ClerkInterface { } return; } + if (noUserExists(this)) { + if (this.#instanceType === 'development') { + throw new ClerkRuntimeError(warnings.cannotOpenCheckout, { + code: CANNOT_RENDER_USER_MISSING_ERROR_CODE, + }); + } + return; + } + void this.#componentControls .ensureMounted({ preloadHint: 'Checkout' }) .then(controls => controls.openDrawer('checkout', props || {})); diff --git a/packages/clerk-js/src/core/warnings.ts b/packages/clerk-js/src/core/warnings.ts index 35ab2dcacb8..91801292e9c 100644 --- a/packages/clerk-js/src/core/warnings.ts +++ b/packages/clerk-js/src/core/warnings.ts @@ -34,6 +34,8 @@ const warnings = { cannotRenderAnyCommerceComponent: createMessageForDisabledCommerce, cannotOpenUserProfile: 'The UserProfile modal cannot render unless a user is signed in. Since no user is signed in, this is no-op.', + cannotOpenCheckout: + 'The Checkout drawer cannot render unless a user is signed in. Since no user is signed in, this is no-op.', cannotOpenSignInOrSignUp: 'The SignIn or SignUp modals do not render when a user is already signed in, unless the application allows multiple sessions. Since a user is signed in and this application only allows a single session, this is no-op.', };