fix(nextjs): Import helper from subpath to avoid static analysis warnings

.changeset/early-steaks-yawn.md

@@ -0,0 +1,5 @@
+---
+"@clerk/nextjs": patch
+---
+
+Fix static analysis warnings warning during production NextJS builds

.changeset/metal-mails-explode.md

@@ -0,0 +1,8 @@
+---
+"@clerk/astro": patch
+"@clerk/chrome-extension": patch
+"@clerk/clerk-js": patch
+"@clerk/shared": patch
+---
+
+Refactor imports from @clerk/shared to improve treeshaking support

.github/actions/init/action.yml

@@ -4,7 +4,7 @@ inputs:
   node-version:
     description: 'The node version to use'
     required: false
-    default: '18'
+    default: '22'
   playwright-enabled:
     description: 'Enable Playwright?'
     required: false

.github/workflows/ci.yml

@@ -36,7 +36,6 @@ jobs:
           turbo-summarize: ${{ env.TURBO_SUMMARIZE }}
           turbo-team: ${{ vars.TURBO_TEAM }}
           turbo-token: ${{ secrets.TURBO_TOKEN }}
-          node-version: 20
 
       - name: Require Changeset
         if: ${{ !(github.event_name == 'merge_group') }}
@@ -91,7 +90,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18, 20]
+        node-version: [18,22]
 
     steps:
       - name: Checkout Repo

.github/workflows/release.yml

@@ -126,7 +126,7 @@ jobs:
 
     strategy:
       matrix:
-        version: [20] # NOTE: 18 is cached in the main release workflow
+        version: [22] # NOTE: 18 is cached in the main release workflow
 
     steps:
       - name: Checkout Repo

packages/astro/src/server/clerk-middleware.ts

@@ -1,8 +1,10 @@
 import type { AuthObject, ClerkClient } from '@clerk/backend';
 import type { AuthenticateRequestOptions, ClerkRequest, RedirectFun, RequestState } from '@clerk/backend/internal';
 import { AuthStatus, constants, createClerkRequest, createRedirect } from '@clerk/backend/internal';
-import { handleValueOrFn, isDevelopmentFromSecretKey, isHttpOrHttps } from '@clerk/shared';
+import { isDevelopmentFromSecretKey } from '@clerk/shared/keys';
+import { isHttpOrHttps } from '@clerk/shared/proxy';
 import { eventMethodCalled } from '@clerk/shared/telemetry';
+import { handleValueOrFn } from '@clerk/shared/utils';
 import type { APIContext } from 'astro';
 
 // @ts-ignore

packages/astro/src/server/server-redirect-with-auth.ts

@@ -1,7 +1,8 @@
 // Middleware runs on the server side, before clerk-js is loaded, that's why we need Cookies.
 import type { AuthenticateRequestOptions, ClerkRequest } from '@clerk/backend/internal';
 import { constants } from '@clerk/backend/internal';
-import { DEV_BROWSER_JWT_KEY, isDevelopmentFromSecretKey, setDevBrowserJWTInURL } from '@clerk/shared';
+import { DEV_BROWSER_JWT_KEY, setDevBrowserJWTInURL } from '@clerk/shared/devBrowser';
+import { isDevelopmentFromSecretKey } from '@clerk/shared/keys';
 
 import { getSafeEnv } from './get-safe-env';
 import type { AstroMiddlewareContextParam } from './types';

packages/chrome-extension/src/internal/clerk.ts

@@ -1,5 +1,5 @@
 import { Clerk } from '@clerk/clerk-js';
-import { DEV_BROWSER_JWT_KEY } from '@clerk/shared';
+import { DEV_BROWSER_JWT_KEY } from '@clerk/shared/devBrowser';
 import { parsePublishableKey } from '@clerk/shared/keys';
 import browser from 'webextension-polyfill';
 

packages/clerk-js/src/core/auth/SessionCookiePoller.ts

@@ -1,4 +1,4 @@
-import { createWorkerTimers } from '@clerk/shared';
+import { createWorkerTimers } from '@clerk/shared/workerTimers';
 
 import { SafeLock } from './safeLock';
 

packages/clerk-js/src/core/clerk.ts

@@ -1,22 +1,13 @@
-import {
-  addClerkPrefix,
-  ClerkRuntimeError,
-  deprecated,
-  handleValueOrFn,
-  inBrowser as inClientSide,
-  is4xxError,
-  isClerkAPIResponseError,
-  isHttpOrHttps,
-  isValidBrowserOnline,
-  isValidProxyUrl,
-  LocalStorageBroadcastChannel,
-  noop,
-  parsePublishableKey,
-  proxyUrlToAbsoluteURL,
-  stripScheme,
-} from '@clerk/shared';
+import { inBrowser as inClientSide, isValidBrowserOnline } from '@clerk/shared/browser';
+import { deprecated } from '@clerk/shared/deprecated';
+import { ClerkRuntimeError, is4xxError, isClerkAPIResponseError } from '@clerk/shared/error';
+import { parsePublishableKey } from '@clerk/shared/keys';
+import { LocalStorageBroadcastChannel } from '@clerk/shared/localStorageBroadcastChannel';
 import { logger } from '@clerk/shared/logger';
+import { isHttpOrHttps, isValidProxyUrl, proxyUrlToAbsoluteURL } from '@clerk/shared/proxy';
 import { eventPrebuiltComponentMounted, TelemetryCollector } from '@clerk/shared/telemetry';
+import { addClerkPrefix, stripScheme } from '@clerk/shared/url';
+import { handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
   __experimental_UserVerificationModalProps,
   ActiveSessionResource,

packages/clerk-js/src/core/fapiClient.ts

@@ -1,4 +1,6 @@
-import { camelToSnake, isBrowserOnline, runWithExponentialBackOff } from '@clerk/shared';
+import { isBrowserOnline } from '@clerk/shared/browser';
+import { camelToSnake } from '@clerk/shared/underscore';
+import { runWithExponentialBackOff } from '@clerk/shared/utils';
 import type { Clerk, ClerkAPIErrorJSON, ClientJSON } from '@clerk/types';
 
 import { buildEmailAddress as buildEmailAddressUtil, buildURL as buildUrlUtil, stringifyQueryParams } from '../utils';

packages/clerk-js/src/core/resources/ExternalAccount.ts

@@ -1,4 +1,4 @@
-import { titleize } from '@clerk/shared';
+import { titleize } from '@clerk/shared/underscore';
 import type {
   ExternalAccountJSON,
   ExternalAccountResource,

packages/clerk-js/src/core/resources/Session.ts

@@ -1,6 +1,6 @@
-import { runWithExponentialBackOff } from '@clerk/shared';
 import { createCheckAuthorization } from '@clerk/shared/authorization';
 import { is4xxError } from '@clerk/shared/error';
+import { runWithExponentialBackOff } from '@clerk/shared/utils';
 import type {
   __experimental_SessionVerificationJSON,
   __experimental_SessionVerificationResource,

packages/clerk-js/src/core/resources/SessionVerification.ts

@@ -1,4 +1,4 @@
-import { deepSnakeToCamel } from '@clerk/shared';
+import { deepSnakeToCamel } from '@clerk/shared/underscore';
 import type {
   __experimental_SessionVerificationFirstFactor,
   __experimental_SessionVerificationJSON,

packages/clerk-js/src/core/resources/SignIn.ts

@@ -1,4 +1,5 @@
-import { deepSnakeToCamel, Poller } from '@clerk/shared';
+import { Poller } from '@clerk/shared/poller';
+import { deepSnakeToCamel } from '@clerk/shared/underscore';
 import { isWebAuthnAutofillSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
 import type {
   AttemptFirstFactorParams,

packages/clerk-js/src/core/resources/SignUp.ts

@@ -1,5 +1,5 @@
-import { Poller } from '@clerk/shared';
 import { isCaptchaError, isClerkAPIResponseError } from '@clerk/shared/error';
+import { Poller } from '@clerk/shared/poller';
 import type {
   AttemptEmailAddressVerificationParams,
   AttemptPhoneNumberVerificationParams,

packages/clerk-js/src/ui/Components.tsx

@@ -1,5 +1,5 @@
-import { createDeferredPromise } from '@clerk/shared';
 import { useSafeLayoutEffect } from '@clerk/shared/react';
+import { createDeferredPromise } from '@clerk/shared/utils';
 import type {
   __experimental_UserVerificationProps,
   Appearance,

packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx

@@ -1,4 +1,4 @@
-import { isUserLockedError } from '@clerk/shared';
+import { isUserLockedError } from '@clerk/shared/error';
 import { useClerk } from '@clerk/shared/react';
 import type { EmailCodeFactor, PhoneCodeFactor, ResetPasswordCodeFactor } from '@clerk/types';
 import React from 'react';

packages/clerk-js/src/ui/components/SignIn/utils.ts

@@ -1,4 +1,4 @@
-import { titleize } from '@clerk/shared';
+import { titleize } from '@clerk/shared/underscore';
 import { isWebAuthnSupported } from '@clerk/shared/webauthn';
 import type { PreferredSignInStrategy, SignInFactor, SignInResource, SignInStrategy } from '@clerk/types';
 

packages/clerk-js/src/ui/components/SignUp/signUpFormHelpers.ts

@@ -1,4 +1,4 @@
-import { camelToSnake } from '@clerk/shared';
+import { camelToSnake } from '@clerk/shared/underscore';
 import type { Attributes, SignUpResource, UserSettingsResource } from '@clerk/types';
 
 import type { FieldState } from '../../common';

packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx

@@ -1,4 +1,4 @@
-import { isClerkRuntimeError } from '@clerk/shared';
+import { isClerkRuntimeError } from '@clerk/shared/error';
 import { __experimental_useReverification as useReverification, useUser } from '@clerk/shared/react';
 import type { TOTPResource } from '@clerk/types';
 import React from 'react';

packages/clerk-js/src/ui/customizables/parseAppearance.ts

@@ -1,4 +1,4 @@
-import { fastDeepMergeAndReplace } from '@clerk/shared';
+import { fastDeepMergeAndReplace } from '@clerk/shared/utils';
 import type { Appearance, DeepPartial, Elements, Layout, Theme } from '@clerk/types';
 
 import { createInternalTheme, defaultInternalTheme } from '../foundations';

packages/clerk-js/src/ui/elements/FormControl.tsx

@@ -1,4 +1,4 @@
-import { titleize } from '@clerk/shared';
+import { titleize } from '@clerk/shared/underscore';
 import type { FieldId } from '@clerk/types';
 import { useCallback, useMemo, useRef, useState } from 'react';
 

packages/clerk-js/src/ui/hooks/usePassword.ts

@@ -1,4 +1,4 @@
-import { noop } from '@clerk/shared';
+import { noop } from '@clerk/shared/utils';
 import type { PasswordValidation } from '@clerk/types';
 import { useCallback, useMemo } from 'react';
 

packages/clerk-js/src/ui/localization/localizationModifiers.ts

@@ -1,4 +1,5 @@
-import { normalizeDate, titleize } from '@clerk/shared';
+import { normalizeDate } from '@clerk/shared/date';
+import { titleize } from '@clerk/shared/underscore';
 
 const timeString = (val: Date | string | number, locale?: string) => {
   try {

packages/clerk-js/src/ui/localization/parseLocalization.ts

@@ -1,4 +1,4 @@
-import { fastDeepMergeAndReplace } from '@clerk/shared';
+import { fastDeepMergeAndReplace } from '@clerk/shared/utils';
 import type { DeepPartial, LocalizationResource } from '@clerk/types';
 import { dequal as deepEqual } from 'dequal';
 

packages/clerk-js/src/ui/new/index.tsx

@@ -1,5 +1,5 @@
-import { createDeferredPromise } from '@clerk/shared';
 import type { ClerkHostRouter } from '@clerk/shared/router';
+import { createDeferredPromise } from '@clerk/shared/utils';
 import type { ClerkOptions, LoadedClerk } from '@clerk/types';
 
 import type { init } from './renderer';

packages/clerk-js/src/ui/router/__mocks__/RouteContext.tsx

@@ -1,4 +1,4 @@
-import { noop } from '@clerk/shared';
+import { noop } from '@clerk/shared/utils';
 
 export const useRouter = () => ({
   resolve: jest.fn(() => ({

packages/clerk-js/src/ui/styledSystem/createVariants.ts

@@ -1,4 +1,4 @@
-import { fastDeepMergeAndReplace } from '@clerk/shared';
+import { fastDeepMergeAndReplace } from '@clerk/shared/utils';
 
 import { createInfiniteAccessProxy } from '../utils';
 import type { InternalTheme, StyleRule } from './types';

packages/clerk-js/src/ui/utils/errorHandler.ts

@@ -1,4 +1,4 @@
-import { snakeToCamel } from '@clerk/shared';
+import { snakeToCamel } from '@clerk/shared/underscore';
 import type { ClerkAPIError, ClerkRuntimeError } from '@clerk/types';
 
 import {

packages/clerk-js/src/ui/utils/getRelativeToNowDateKey.ts

@@ -1,4 +1,4 @@
-import { formatRelative } from '@clerk/shared';
+import { formatRelative } from '@clerk/shared/date';
 
 import { localizationKeys } from '../localization';
 

packages/clerk-js/src/ui/utils/runtimeEnvironment.ts

@@ -1,4 +1,4 @@
-import { isDevelopmentEnvironment } from '@clerk/shared';
+import { isDevelopmentEnvironment } from '@clerk/shared/utils';
 import type { LoadedClerk } from '@clerk/types';
 
 export const isDevelopmentSDK = (clerk: LoadedClerk) =>

packages/clerk-js/src/utils/__tests__/querystring.test.ts

@@ -1,4 +1,4 @@
-import { camelToSnake } from '@clerk/shared';
+import { camelToSnake } from '@clerk/shared/underscore';
 
 import { getQueryParams, stringifyQueryParams } from '../querystring';
 

packages/clerk-js/src/utils/convertPageToOffsetSearchParams.ts

@@ -1,4 +1,4 @@
-import { getNonUndefinedValues } from '@clerk/shared';
+import { getNonUndefinedValues } from '@clerk/shared/underscore';
 import type { ClerkPaginationParams } from '@clerk/types';
 
 export function convertPageToOffsetSearchParams<T>(pageParams: ClerkPaginationParams<T> | undefined) {

packages/clerk-js/src/utils/passwords/password.ts

@@ -1,4 +1,4 @@
-import { noop } from '@clerk/shared';
+import { noop } from '@clerk/shared/utils';
 import type { PasswordSettingsData, PasswordValidation, ValidatePasswordCallbacks } from '@clerk/types';
 
 import { loadZxcvbn } from '../zxcvbn';

packages/elements/src/internals/errors/index.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import type { MetamaskError } from '@clerk/shared';
 import type { ClerkAPIError } from '@clerk/types';
 

packages/elements/src/react/hooks/use-password.hook.ts

@@ -1,5 +1,5 @@
-import { noop } from '@clerk/shared';
 import { useClerk } from '@clerk/shared/react';
+import { noop } from '@clerk/shared/utils';
 import type { PasswordSettingsData, PasswordValidation } from '@clerk/types';
 import * as React from 'react';
 

packages/eslint-config-custom/_base.js

@@ -30,6 +30,28 @@ module.exports = {
   rules: {
     'simple-import-sort/imports': 'error',
     curly: 'error',
+    'no-restricted-imports': [
+      'error',
+      {
+        paths: [
+          {
+            name: '@clerk/shared',
+            message: "Please always import from '@clerk/shared/<module>' instead of '@clerk/shared'.",
+          },
+        ],
+        patterns: [
+          {
+            group: ['!@clerk/shared/*'],
+            message: 'ignore this line -- eslint matching workaround to allow all imports except @clerk/shared',
+          },
+          {
+            group: ['@emotion/*'],
+            message:
+              'Please do not import emotion directly. Import helpers from ./design-system or ./primitives instead.',
+          },
+        ],
+      },
+    ],
   },
   overrides: [
     {

packages/eslint-config-custom/react.js

@@ -27,18 +27,6 @@ const extensions = [
 module.exports = {
   extends: extensions,
   rules: {
-    'no-restricted-imports': [
-      'error',
-      {
-        patterns: [
-          {
-            group: ['@emotion/*'],
-            message:
-              'Please do not import emotion directly. Import helpers from ./design-system or ./primitives instead.',
-          },
-        ],
-      },
-    ],
     'react/button-has-type': 'warn',
     'react/function-component-definition': 'off',
     'react/hook-use-state': 'warn',

packages/express/src/authenticateRequest.ts

@@ -1,8 +1,8 @@
 import type { RequestState } from '@clerk/backend/internal';
 import { AuthStatus, createClerkRequest } from '@clerk/backend/internal';
-import { handleValueOrFn } from '@clerk/shared/handleValueOrFn';
 import { isDevelopmentFromSecretKey } from '@clerk/shared/keys';
 import { isHttpOrHttps, isProxyUrlRelative, isValidProxyUrl } from '@clerk/shared/proxy';
+import { handleValueOrFn } from '@clerk/shared/utils';
 import type { RequestHandler, Response } from 'express';
 import type { IncomingMessage } from 'http';
 

packages/nextjs/src/client-boundary/hooks/useEnforceCatchAllRoute.tsx

@@ -1,4 +1,4 @@
-import { isProductionEnvironment } from '@clerk/shared';
+import { isProductionEnvironment } from '@clerk/shared/utils';
 import type { RoutingStrategy } from '@clerk/types';
 import React from 'react';
 

packages/nextjs/src/server/createGetAuth.ts

@@ -1,7 +1,7 @@
 import type { AuthObject } from '@clerk/backend';
 import { constants } from '@clerk/backend/internal';
 import { decodeJwt } from '@clerk/backend/jwt';
-import { isTruthy } from '@clerk/shared';
+import { isTruthy } from '@clerk/shared/underscore';
 
 import { withLogger } from '../utils/debugLogger';
 import { getAuthDataFromRequest } from './data/getAuthDataFromRequest';

packages/nextjs/src/server/utils.ts

@@ -1,9 +1,9 @@
 import type { AuthenticateRequestOptions, ClerkRequest, RequestState } from '@clerk/backend/internal';
 import { constants } from '@clerk/backend/internal';
-import { handleValueOrFn } from '@clerk/shared/handleValueOrFn';
 import { isDevelopmentFromSecretKey } from '@clerk/shared/keys';
 import { logger } from '@clerk/shared/logger';
 import { isHttpOrHttps } from '@clerk/shared/proxy';
+import { handleValueOrFn } from '@clerk/shared/utils';
 import AES from 'crypto-js/aes';
 import encUtf8 from 'crypto-js/enc-utf8';
 import hmacSHA1 from 'crypto-js/hmac-sha1';

packages/react/src/components/uiComponents.tsx

@@ -1,5 +1,6 @@
-import { logErrorInDevMode, without } from '@clerk/shared';
+import { without } from '@clerk/shared/object';
 import { isDeeplyEqual } from '@clerk/shared/react';
+import { logErrorInDevMode } from '@clerk/shared/utils';
 import type {
   CreateOrganizationProps,
   GoogleOneTapProps,

packages/react/src/isomorphicClerk.ts

@@ -1,7 +1,7 @@
 import { inBrowser } from '@clerk/shared/browser';
-import { handleValueOrFn } from '@clerk/shared/handleValueOrFn';
 import { loadClerkJsScript } from '@clerk/shared/loadClerkJsScript';
 import type { TelemetryCollector } from '@clerk/shared/telemetry';
+import { handleValueOrFn } from '@clerk/shared/utils';
 import type {
   __experimental_UserVerificationModalProps,
   __experimental_UserVerificationProps,

packages/react/src/utils/useCustomMenuItems.tsx

@@ -1,4 +1,4 @@
-import { logErrorInDevMode } from '@clerk/shared';
+import { logErrorInDevMode } from '@clerk/shared/utils';
 import type { CustomMenuItem } from '@clerk/types';
 import type { ReactElement } from 'react';
 import React from 'react';

packages/react/src/utils/useCustomPages.tsx

@@ -1,4 +1,4 @@
-import { logErrorInDevMode } from '@clerk/shared';
+import { logErrorInDevMode } from '@clerk/shared/utils';
 import type { CustomPage } from '@clerk/types';
 import type { ReactElement } from 'react';
 import React from 'react';