fix(nextjs): Adjust shared imports to remove edge runtime warnings (#…

…1924)

* fix(nextjs): Adjust shared imports to remove runtime warnings on import

* fix(clerk-react): Use specific clerk/shared entries

* chore(repo): Add changeset

.changeset/poor-balloons-pretend.md

@@ -0,0 +1,8 @@
+---
+'@clerk/backend': patch
+'@clerk/nextjs': patch
+'@clerk/shared': patch
+'@clerk/clerk-react': patch
+---
+
+Update imports of `@clerk/shared` to granular entrypoints. This addresses warnings during a Next.js build that are the result of unsupported APIs being included in the module graph of builds for the edge runtime.

packages/backend/src/tokens/jwt/cryptoKeys.ts

@@ -1,4 +1,4 @@
-import { isomorphicAtob } from '@clerk/shared';
+import { isomorphicAtob } from '@clerk/shared/isomorphicAtob';
 
 import runtime from '../../runtime';
 

packages/backend/src/util/shared.ts

@@ -1,17 +1,11 @@
-export {
-  addClerkPrefix,
-  callWithRetry,
-  getClerkJsMajorVersionOrTag,
-  getScriptUrl,
-  isDevelopmentFromApiKey,
-  isProductionFromApiKey,
-  parsePublishableKey,
-} from '@clerk/shared';
+export { addClerkPrefix, getScriptUrl, getClerkJsMajorVersionOrTag } from '@clerk/shared/url';
+export { callWithRetry } from '@clerk/shared/callWithRetry';
+export { isDevelopmentFromApiKey, isProductionFromApiKey, parsePublishableKey } from '@clerk/shared/keys';
 export { deprecated, deprecatedProperty } from '@clerk/shared/deprecated';
 
 import { buildErrorThrower } from '@clerk/shared/error';
 // TODO: replace packageName with `${PACKAGE_NAME}@${PACKAGE_VERSION}` from tsup.config.ts
 export const errorThrower = buildErrorThrower({ packageName: '@clerk/backend' });
 
-import { createDevOrStagingUrlCache } from '@clerk/shared';
+import { createDevOrStagingUrlCache } from '@clerk/shared/keys';
 export const { isDevOrStagingUrl } = createDevOrStagingUrlCache();

packages/nextjs/src/server/utils.ts

@@ -1,6 +1,7 @@
 import type { RequestState } from '@clerk/backend';
 import { buildRequestUrl, constants } from '@clerk/backend';
-import { handleValueOrFn, isHttpOrHttps } from '@clerk/shared';
+import { handleValueOrFn } from '@clerk/shared/handleValueOrFn';
+import { isHttpOrHttps } from '@clerk/shared/proxy';
 import type { NextRequest } from 'next/server';
 import { NextResponse } from 'next/server';
 

packages/react/src/contexts/ClerkProvider.tsx

@@ -1,4 +1,4 @@
-import { isLegacyFrontendApiKey, isPublishableKey } from '@clerk/shared';
+import { isLegacyFrontendApiKey, isPublishableKey } from '@clerk/shared/keys';
 import type { InitialState } from '@clerk/types';
 import React from 'react';
 

packages/react/src/isomorphicClerk.ts

@@ -1,4 +1,6 @@
-import { deprecated, handleValueOrFn, inBrowser } from '@clerk/shared';
+import { inBrowser } from '@clerk/shared/browser';
+import { deprecated } from '@clerk/shared/deprecated';
+import { handleValueOrFn } from '@clerk/shared/handleValueOrFn';
 import type {
   ActiveSessionResource,
   AuthenticateWithMetamaskParams,

packages/react/src/utils/isDevOrStageUrl.tsx

@@ -1,3 +1,3 @@
-import { createDevOrStagingUrlCache } from '@clerk/shared';
+import { createDevOrStagingUrlCache } from '@clerk/shared/keys';
 const { isDevOrStagingUrl } = createDevOrStagingUrlCache();
 export { isDevOrStagingUrl };

packages/react/src/utils/loadClerkJsScript.ts

@@ -1,4 +1,7 @@
-import { addClerkPrefix, isValidProxyUrl, loadScript, parsePublishableKey, proxyUrlToAbsoluteURL } from '@clerk/shared';
+import { parsePublishableKey } from '@clerk/shared/keys';
+import { loadScript } from '@clerk/shared/loadScript';
+import { isValidProxyUrl, proxyUrlToAbsoluteURL } from '@clerk/shared/proxy';
+import { addClerkPrefix } from '@clerk/shared/url';
 
 import type { IsomorphicClerkOptions } from '../types';
 import { errorThrower } from './errorThrower';
@@ -12,7 +15,7 @@ type LoadClerkJsScriptOptions = Omit<IsomorphicClerkOptions, 'proxyUrl' | 'domai
   domain: string;
 };
 
-export const loadClerkJsScript = async (opts: LoadClerkJsScriptOptions) => {
+export const loadClerkJsScript = (opts: LoadClerkJsScriptOptions) => {
   const { frontendApi, publishableKey } = opts;
 
   if (!publishableKey && !frontendApi) {

packages/shared/src/index.ts

@@ -12,6 +12,7 @@ export * from './utils';
 
 export { createWorkerTimers } from './workerTimers';
 export * from './browser';
+export { callWithRetry } from './callWithRetry';
 export * from './color';
 export * from './date';
 export * from './deprecated';

packages/shared/src/keys.ts

@@ -86,3 +86,11 @@ export function createDevOrStagingUrlCache() {
     },
   };
 }
+
+export function isDevelopmentFromApiKey(apiKey: string): boolean {
+  return apiKey.startsWith('test_') || apiKey.startsWith('sk_test_');
+}
+
+export function isProductionFromApiKey(apiKey: string): boolean {
+  return apiKey.startsWith('live_') || apiKey.startsWith('sk_live_');
+}

packages/shared/src/utils/index.ts

@@ -1,6 +1,5 @@
-export { callWithRetry } from './callWithRetry';
 export * from './createDeferredPromise';
-export { isDevelopmentFromApiKey, isProductionFromApiKey, isStaging } from './instance';
+export { isStaging } from './instance';
 export { noop } from './noop';
 export * from './runtimeEnvironment';
 export * from './runWithExponentialBackOff';

packages/shared/src/utils/instance.ts

@@ -1,11 +1,3 @@
-export function isDevelopmentFromApiKey(apiKey: string): boolean {
-  return apiKey.startsWith('test_') || apiKey.startsWith('sk_test_');
-}
-
-export function isProductionFromApiKey(apiKey: string): boolean {
-  return apiKey.startsWith('live_') || apiKey.startsWith('sk_live_');
-}
-
 export function isStaging(frontendApi: string): boolean {
   return (
     frontendApi.endsWith('.lclstage.dev') ||