fix(shared): restore ESM declarations

.changeset/fix-shared-esm-declarations.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': patch
+---
+
+Fix ESM declaration files for Node-style package resolution.

packages/react/package.json

@@ -29,8 +29,8 @@
         "default": "./dist/index.mjs"
       },
       "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
       }
     },
     "./internal": {
@@ -39,8 +39,8 @@
         "default": "./dist/internal.mjs"
       },
       "require": {
-        "types": "./dist/internal.d.ts",
-        "default": "./dist/internal.js"
+        "types": "./dist/internal.d.cts",
+        "default": "./dist/internal.cjs"
       }
     },
     "./errors": {
@@ -49,8 +49,8 @@
         "default": "./dist/errors.mjs"
       },
       "require": {
-        "types": "./dist/errors.d.ts",
-        "default": "./dist/errors.js"
+        "types": "./dist/errors.d.cts",
+        "default": "./dist/errors.cjs"
       }
     },
     "./experimental": {
@@ -59,8 +59,8 @@
         "default": "./dist/experimental.mjs"
       },
       "require": {
-        "types": "./dist/experimental.d.ts",
-        "default": "./dist/experimental.js"
+        "types": "./dist/experimental.d.cts",
+        "default": "./dist/experimental.cjs"
       }
     },
     "./legacy": {
@@ -69,21 +69,21 @@
         "default": "./dist/legacy.mjs"
       },
       "require": {
-        "types": "./dist/legacy.d.ts",
-        "default": "./dist/legacy.js"
+        "types": "./dist/legacy.d.cts",
+        "default": "./dist/legacy.cjs"
       }
     },
     "./types": {
       "import": {
         "types": "./dist/types.d.mts"
       },
       "require": {
-        "types": "./dist/types.d.ts"
+        "types": "./dist/types.d.cts"
       }
     },
     "./package.json": "./package.json"
   },
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "files": [
     "dist"
   ],

packages/react/src/contexts/ClerkProvider.tsx

@@ -1,10 +1,9 @@
 import { ClerkContextProvider } from '@clerk/shared/react';
-import type { Ui } from '@clerk/ui/internal';
 import React from 'react';
 
 import { multipleClerkProvidersError } from '../errors/messages';
 import { IsomorphicClerk } from '../isomorphicClerk';
-import type { ClerkProviderProps, IsomorphicClerkOptions } from '../types';
+import type { ClerkProviderProps, IsomorphicClerkOptions, Ui } from '../types';
 import { mergeWithEnv, withMaxAllowedInstancesGuard } from '../utils';
 import { IS_REACT_SHARED_VARIANT_COMPATIBLE } from '../utils/versionCheck';
 

packages/react/src/contexts/__tests__/ClerkProvider.test.tsx

@@ -19,8 +19,15 @@ import { dark } from '@clerk/ui/themes';
 import { describe, expectTypeOf, it } from 'vitest';
 
 import type { ClerkProvider } from '../ClerkProvider';
+import type { ClerkProviderProps as GenericClerkProviderProps, Ui } from '../../types';
 
 type ClerkProviderProps = Parameters<typeof ClerkProvider>[0];
+type CustomAppearance = {
+  options?: {
+    customFlag?: boolean;
+  };
+};
+const customUi = {} as Ui<CustomAppearance>;
 
 describe('ClerkProvider', () => {
   describe('Type tests', () => {
@@ -85,6 +92,19 @@ describe('ClerkProvider', () => {
       //   appearance: { elements: { nonExistentKey: '' } },
       // }).not.toMatchTypeOf<ClerkProviderProps>();
     });
+
+    it('is driven by the passed ui object type', () => {
+      expectTypeOf({
+        ...defaultProps,
+        ui: customUi,
+        appearance: { options: { customFlag: true } },
+      }).toMatchTypeOf<GenericClerkProviderProps<typeof customUi>>();
+
+      expectTypeOf({
+        ...defaultProps,
+        appearance: { options: { customFlag: true } },
+      }).not.toMatchTypeOf<ClerkProviderProps>();
+    });
   });
 
   describe('localization', () => {

packages/react/src/internal.ts

@@ -1,9 +1,8 @@
 import type { InternalClerkScriptProps } from '@clerk/shared/types';
-import type { Ui } from '@clerk/ui/internal';
 import type React from 'react';
 
 import { ClerkProvider } from './contexts/ClerkProvider';
-import type { ClerkProviderProps } from './types';
+import type { ClerkProviderProps, Ui } from './types';
 
 export { setErrorThrowerOptions } from './errors/errorThrower';
 export { MultisessionAppSupport } from './components/controlComponents';
@@ -23,7 +22,7 @@ export {
   setClerkJsLoadingErrorPackageName,
 } from '@clerk/shared/loadClerkJsScript';
 
-export type { Ui } from '@clerk/ui/internal';
+export type { Ui } from './types';
 
 export type { InternalClerkScriptProps } from '@clerk/shared/types';
 

packages/react/src/types.ts

@@ -10,7 +10,7 @@ import type {
   TasksRedirectOptions,
 } from '@clerk/shared/types';
 import type { ClerkUIConstructor } from '@clerk/shared/ui';
-import type { Appearance, ExtractAppearanceType, Ui } from '@clerk/ui/internal';
+import type { Appearance, ExtractAppearanceType } from '@clerk/ui/internal';
 import type React from 'react';
 
 // Re-export types from @clerk/shared that are used by other modules
@@ -34,6 +34,15 @@ declare global {
   }
 }
 
+// This is a redeclaration of the Ui type from @clerk/ui/internal, which prevents TypeScript from complaining that
+// there is a type mismatch between the Ui type from @clerk/ui/internal and the bundled Ui type from @clerk/react.
+export interface Ui<A = any> {
+  __brand?: '__clerkUI';
+  ClerkUI?: ClerkUIConstructor | Promise<ClerkUIConstructor>;
+  version?: string;
+  __appearanceType?: A;
+}
+
 /**
  * @interface
  */

packages/react/tsconfig.json

@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
     "esModuleInterop": true,
     "importHelpers": true,
     "isolatedModules": true,
@@ -16,7 +15,8 @@
     "skipLibCheck": true,
     "sourceMap": false,
     "strict": true,
-    "target": "ES2019"
+    "target": "ES2019",
+    "rootDir": "./src"
   },
   "include": ["src"]
 }

packages/react/tsconfig.test.json

@@ -1,7 +1,6 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "baseUrl": "src",
     "jsx": "react",
     "noImplicitReturns": false,
     "strict": false,

packages/react/tsdown.config.mts

@@ -2,7 +2,7 @@ import { readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 
 import { parse as parseYaml } from 'yaml';
-import { defineConfig } from 'tsdown';
+import { defineConfig, type Options } from 'tsdown';
 
 import clerkJsPkgJson from '../clerk-js/package.json' with { type: 'json' };
 import pkgJson from './package.json' with { type: 'json' };
@@ -52,7 +52,7 @@ function getClerkUISupportedReactBounds(): VersionBounds[] {
   return bounds;
 }
 
-export default defineConfig(overrideOptions => {
+export default defineConfig((overrideOptions: Options) => {
   const isWatch = !!overrideOptions.watch;
   const shouldPublish = !!overrideOptions.env?.publish;
   const clerkUISupportedReactBounds = getClerkUISupportedReactBounds();
@@ -66,7 +66,9 @@ export default defineConfig(overrideOptions => {
       legacy: 'src/legacy.ts',
       types: 'src/types/index.ts',
     },
-    dts: true,
+    dts: {
+      cjsReexport: true,
+    },
     onSuccess: shouldPublish ? 'pkglab pub --ping' : undefined,
     format: ['cjs', 'esm'],
     clean: true,

packages/shared/package.json

@@ -12,92 +12,92 @@
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/runtime/index.d.mts",
-        "default": "./dist/runtime/index.mjs"
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
       },
       "require": {
-        "types": "./dist/runtime/index.d.ts",
-        "default": "./dist/runtime/index.js"
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
       }
     },
     "./internal/clerk-js/*": {
       "import": {
-        "types": "./dist/runtime/internal/clerk-js/*.d.mts",
-        "default": "./dist/runtime/internal/clerk-js/*.mjs"
+        "types": "./dist/internal/clerk-js/*.d.mts",
+        "default": "./dist/internal/clerk-js/*.mjs"
       },
       "require": {
-        "types": "./dist/runtime/internal/clerk-js/*.d.ts",
-        "default": "./dist/runtime/internal/clerk-js/*.js"
+        "types": "./dist/internal/clerk-js/*.d.ts",
+        "default": "./dist/internal/clerk-js/*.js"
       }
     },
     "./*": {
       "import": {
-        "types": "./dist/runtime/*.d.mts",
-        "default": "./dist/runtime/*.mjs"
+        "types": "./dist/*.d.mts",
+        "default": "./dist/*.mjs"
       },
       "require": {
-        "types": "./dist/runtime/*.d.ts",
-        "default": "./dist/runtime/*.js"
+        "types": "./dist/*.d.ts",
+        "default": "./dist/*.js"
       }
     },
     "./react": {
       "import": {
-        "types": "./dist/runtime/react/index.d.mts",
-        "default": "./dist/runtime/react/index.mjs"
+        "types": "./dist/react/index.d.mts",
+        "default": "./dist/react/index.mjs"
       },
       "require": {
-        "types": "./dist/runtime/react/index.d.ts",
-        "default": "./dist/runtime/react/index.js"
+        "types": "./dist/react/index.d.ts",
+        "default": "./dist/react/index.js"
       }
     },
     "./keyless": {
       "import": {
-        "types": "./dist/runtime/keyless/index.d.mts",
-        "default": "./dist/runtime/keyless/index.mjs"
+        "types": "./dist/keyless/index.d.mts",
+        "default": "./dist/keyless/index.mjs"
       },
       "require": {
-        "types": "./dist/runtime/keyless/index.d.ts",
-        "default": "./dist/runtime/keyless/index.js"
+        "types": "./dist/keyless/index.d.ts",
+        "default": "./dist/keyless/index.js"
       }
     },
     "./utils": {
       "import": {
-        "types": "./dist/runtime/utils/index.d.mts",
-        "default": "./dist/runtime/utils/index.mjs"
+        "types": "./dist/utils/index.d.mts",
+        "default": "./dist/utils/index.mjs"
       },
       "require": {
-        "types": "./dist/runtime/utils/index.d.ts",
-        "default": "./dist/runtime/utils/index.js"
+        "types": "./dist/utils/index.d.ts",
+        "default": "./dist/utils/index.js"
       }
     },
     "./workerTimers": {
       "import": {
-        "types": "./dist/runtime/workerTimers/index.d.mts",
-        "default": "./dist/runtime/workerTimers/index.mjs"
+        "types": "./dist/workerTimers/index.d.mts",
+        "default": "./dist/workerTimers/index.mjs"
       },
       "require": {
-        "types": "./dist/runtime/workerTimers/index.d.ts",
-        "default": "./dist/runtime/workerTimers/index.js"
+        "types": "./dist/workerTimers/index.d.ts",
+        "default": "./dist/workerTimers/index.js"
       }
     },
     "./dom": {
       "import": {
-        "types": "./dist/runtime/dom/index.d.mts",
-        "default": "./dist/runtime/dom/index.mjs"
+        "types": "./dist/dom/index.d.mts",
+        "default": "./dist/dom/index.mjs"
       },
       "require": {
-        "types": "./dist/runtime/dom/index.d.ts",
-        "default": "./dist/runtime/dom/index.js"
+        "types": "./dist/dom/index.d.ts",
+        "default": "./dist/dom/index.js"
       }
     },
     "./ui": {
       "import": {
-        "types": "./dist/runtime/ui/index.d.mts",
-        "default": "./dist/runtime/ui/index.mjs"
+        "types": "./dist/ui/index.d.mts",
+        "default": "./dist/ui/index.mjs"
       },
       "require": {
-        "types": "./dist/runtime/ui/index.d.ts",
-        "default": "./dist/runtime/ui/index.js"
+        "types": "./dist/ui/index.d.ts",
+        "default": "./dist/ui/index.js"
       }
     },
     "./types": {
@@ -112,20 +112,14 @@
     },
     "./package.json": "./package.json"
   },
-  "typesVersions": {
-    "*": {
-      "types": [
-        "dist/types/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "scripts"
   ],
   "scripts": {
-    "build": "tsdown",
-    "build:declarations": "tsc -p tsconfig.json",
+    "build": "tsdown && pnpm build:declarations && pnpm build:declarations:esm",
+    "build:declarations": "tsc -p tsconfig.declarations.json",
+    "build:declarations:esm": "node ./scripts/copy-dmts.mjs",
     "clean": "rimraf ./dist",
     "dev": "tsdown --watch src",
     "dev:pub": "pnpm dev -- --env.publish",