diff --git a/.changeset/modern-badgers-flash.md b/.changeset/modern-badgers-flash.md new file mode 100644 index 00000000000..af8abba16f9 --- /dev/null +++ b/.changeset/modern-badgers-flash.md @@ -0,0 +1,5 @@ +--- +"@clerk/clerk-js": patch +--- + +Add development mode warning in the browser console when `load()` happens. Companion PR for [Add dev mode warning to components](https://github.com/clerk/javascript/pull/3870). diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 4b0ca388918..ac4b6a44a54 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -14,6 +14,7 @@ import { proxyUrlToAbsoluteURL, stripScheme, } from '@clerk/shared'; +import { logger } from '@clerk/shared/logger'; import { eventPrebuiltComponentMounted, TelemetryCollector } from '@clerk/shared/telemetry'; import type { ActiveSessionResource, @@ -271,6 +272,13 @@ export class Clerk implements ClerkInterface { return; } + // Log a development mode warning once + if (this.#instanceType === 'development') { + logger.warnOnce( + 'Clerk: Clerk has been loaded with development keys. Development instances have strict usage limits and should not be used when deploying your application to production. Learn more: https://clerk.com/docs/deployments/overview', + ); + } + this.#options = { ...defaultOptions, ...options, diff --git a/packages/clerk-js/src/utils/assertNoLegacyProp.ts b/packages/clerk-js/src/utils/assertNoLegacyProp.ts index 50a51d04e56..a574b8d9e2f 100644 --- a/packages/clerk-js/src/utils/assertNoLegacyProp.ts +++ b/packages/clerk-js/src/utils/assertNoLegacyProp.ts @@ -5,9 +5,8 @@ export function assertNoLegacyProp(props: Record) { const legacyProp = Object.keys(props).find(key => legacyProps.includes(key)); if (legacyProp && props[legacyProp]) { - // TODO: @nikos update with the docs link logger.warnOnce( - `Clerk: The prop "${legacyProp}" is deprecated and should be replaced with the new "fallbackRedirectUrl" or "forceRedirectUrl" props instead.`, + `Clerk: The prop "${legacyProp}" is deprecated and should be replaced with the new "fallbackRedirectUrl" or "forceRedirectUrl" props instead. Learn more: https://clerk.com/docs/guides/custom-redirects#redirect-url-props`, ); } } @@ -19,9 +18,8 @@ export function warnForNewPropShadowingLegacyProp( legacyValue: string | undefined | null, ) { if (newValue && legacyValue) { - // TODO: @nikos update with the docs link logger.warnOnce( - `Clerk: The "${newKey}" prop ("${newValue}") has priority over the legacy "${legacyKey}" (or "redirectUrl") ("${legacyValue}"), which will be completely ignored in this case. "${legacyKey}" (or "redirectUrl" prop) should be replaced with the new "fallbackRedirectUrl" or "forceRedirectUrl" props instead.`, + `Clerk: The "${newKey}" prop ("${newValue}") has priority over the legacy "${legacyKey}" (or "redirectUrl") ("${legacyValue}"), which will be completely ignored in this case. "${legacyKey}" (or "redirectUrl" prop) should be replaced with the new "fallbackRedirectUrl" or "forceRedirectUrl" props instead. Learn more: https://clerk.com/docs/guides/custom-redirects#redirect-url-props`, ); } }