From c9e0f68af1a5cf07dc373ff45999c72d3d86f8f9 Mon Sep 17 00:00:00 2001
From: Dimitris Klouvas <dimitris@clerk.dev>
Date: Wed, 29 Nov 2023 19:46:05 +0200
Subject: [PATCH] fix(clerk-react): ESM bundle with vite / rollup (#2216)

---
 .changeset/new-points-turn.md             |  7 ++++++
 packages/react/package.json               | 26 +++++++++-----------
 packages/react/tsconfig.declarations.json | 12 ---------
 packages/react/tsup.config.ts             | 30 +++++++++--------------
 4 files changed, 30 insertions(+), 45 deletions(-)
 create mode 100644 .changeset/new-points-turn.md
 delete mode 100644 packages/react/tsconfig.declarations.json

diff --git a/.changeset/new-points-turn.md b/.changeset/new-points-turn.md
new file mode 100644
index 0000000000..2c3ec4cf7c
--- /dev/null
+++ b/.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__`).
diff --git a/packages/react/package.json b/packages/react/package.json
index 17799dfa67..4e81520749 100644
--- a/packages/react/package.json
+++ b/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",
diff --git a/packages/react/tsconfig.declarations.json b/packages/react/tsconfig.declarations.json
deleted file mode 100644
index c42a5efd18..0000000000
--- a/packages/react/tsconfig.declarations.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "noEmit": false,
-    "declaration": true,
-    "emitDeclarationOnly": true,
-    "declarationMap": true,
-    "sourceMap": false,
-    "declarationDir": "./dist/types"
-  }
-}
diff --git a/packages/react/tsup.config.ts b/packages/react/tsup.config.ts
index 3649814237..e2b4da4830 100644
--- a/packages/react/tsup.config.ts
+++ b/packages/react/tsup.config.ts
@@ -1,21 +1,26 @@
-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}"`,
@@ -23,17 +28,4 @@ export default defineConfig(overrideOptions => {
       __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);
 });