fix(clerk-react): ESM bundle with vite / rollup (#2216)

.changeset/new-points-turn.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-react': minor
+---
+
+Fix `@clerk/clerk-react` bundle output to resolve issues with vite / rollup ESM module imports.
+We have also used the `bundle` output to export a single index.ts and dropped the unnecessary
+published files / folders (eg `__tests__`).

packages/react/package.json

@@ -22,28 +22,26 @@
   },
   "license": "MIT",
   "author": "Clerk",
-  "sideEffects": [
-    "./dist/cjs/index.js",
-    "./dist/cjs/polyfills.js",
-    "./dist/esm/index.js",
-    "./dist/esm/polyfills.js"
-  ],
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
-    }
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
   },
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/types/index.d.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
     "build": "tsup",
-    "build:declarations": "tsc -p tsconfig.declarations.json",
     "clean": "rimraf ./dist",
     "dev": "tsup --watch",
     "dev:publish": "npm run dev -- --env.publish",

packages/react/tsup.config.ts

@@ -1,39 +1,31 @@
-import type { Options } from 'tsup';
 import { defineConfig } from 'tsup';
 
-import { runAfterLast } from '../../scripts/utils';
+// @ts-expect-error for `import module with '.json' extension`
 import { version as clerkJsVersion } from '../clerk-js/package.json';
+// @ts-expect-error for `import module with '.json' extension`
 import { name, version } from './package.json';
 
 export default defineConfig(overrideOptions => {
   const isWatch = !!overrideOptions.watch;
   const shouldPublish = !!overrideOptions.env?.publish;
 
-  const common: Options = {
-    entry: ['./src/**/*.{ts,tsx,js,jsx}', '!./src/**/*.test.{ts,tsx}'],
-    bundle: false,
+  return {
+    entry: {
+      index: 'src/index.ts',
+    },
+    onSuccess: shouldPublish ? 'npm run publish:local' : undefined,
+    format: ['cjs', 'esm'],
+    bundle: true,
     clean: true,
     minify: false,
     sourcemap: true,
-    legacyOutput: true,
+    dts: true,
+    external: ['react', 'react-dom'],
     define: {
       PACKAGE_NAME: `"${name}"`,
       PACKAGE_VERSION: `"${version}"`,
       JS_PACKAGE_VERSION: `"${clerkJsVersion}"`,
       __DEV__: `${isWatch}`,
     },
   };
-
-  const esm: Options = {
-    ...common,
-    format: 'esm',
-  };
-
-  const cjs: Options = {
-    ...common,
-    format: 'cjs',
-    outDir: './dist/cjs',
-  };
-
-  return runAfterLast(['npm run build:declarations', shouldPublish && 'npm run publish:local'])(esm, cjs);
 });