feat(ui): Switch to ESM only builds

Author: nikosdouvlis

packages/themes/tsconfig.json

@@ -3,8 +3,8 @@
     "outDir": "dist",
     "baseUrl": ".",
     "lib": ["es6", "dom"],
-    "module": "nodenext",
-    "moduleResolution": "nodenext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "declaration": true,
     "declarationMap": false,

packages/ui/package.json

@@ -10,23 +10,21 @@
   "license": "MIT",
   "author": "Clerk",
   "sideEffects": false,
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/ui.mjs",
-      "require": "./dist/ui.js",
       "default": "./dist/ui.mjs"
     },
     "./entry": {
       "types": "./dist/types/entry.d.ts",
       "import": "./dist/entry.mjs",
-      "require": "./dist/entry.js",
       "default": "./dist/entry.mjs"
     },
     "./internal": {
       "types": "./dist/types/internal.d.ts",
       "import": "./dist/ui.mjs",
-      "require": "./dist/ui.js",
       "default": "./dist/ui.mjs"
     },
     "./package.json": "./package.json"
@@ -37,14 +35,14 @@
   ],
   "scripts": {
     "build": "pnpm build:bundle && pnpm build:declarations",
-    "build:analyze": "rspack build --config rspack.config.js --env production --analyze",
-    "build:bundle": "rspack build --config rspack.config.js --env production",
+    "build:analyze": "rspack build --config rspack.config.mjs --env production --analyze",
+    "build:bundle": "rspack build --config rspack.config.mjs --env production",
     "build:declarations": "tsc -p tsconfig.declarations.json",
     "bundlewatch": "FORCE_COLOR=1 bundlewatch --config bundlewatch.config.json",
     "bundlewatch:fix": "node bundlewatch-fix.mjs",
     "clean": "rimraf ./dist",
-    "dev": "rspack serve --config rspack.config.js",
-    "dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4001}",
+    "dev": "rspack serve --config rspack.config.mjs",
+    "dev:origin": "rspack serve --config rspack.config.mjs --env devOrigin=http://localhost:${PORT:-4001}",
     "format": "node ../../scripts/format-package.mjs",
     "format:check": "node ../../scripts/format-package.mjs --check",
     "lint": "eslint src",

packages/ui/rspack.config.js

@@ -1,10 +1,14 @@
 // @ts-check
-const rspack = require('@rspack/core');
-const packageJSON = require('./package.json');
-const path = require('path');
-const { merge } = require('webpack-merge');
-const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
-const { svgLoader, typescriptLoaderProd, typescriptLoaderDev } = require('../../scripts/rspack-common');
+import rspack from '@rspack/core';
+import packageJSON from './package.json' with { type: 'json' };
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { merge } from 'webpack-merge';
+import ReactRefreshPlugin from '@rspack/plugin-react-refresh';
+import { svgLoader, typescriptLoaderProd, typescriptLoaderDev } from '../../scripts/rspack-common.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const isProduction = mode => mode === 'production';
 const isDevelopment = mode => !isProduction(mode);
@@ -228,23 +232,6 @@ const prodConfig = mode => {
     },
   });
 
-  // CJS module bundle (no chunks)
-  const uiCjs = merge(entryForVariant(variants.ui), common({ mode, variant: variants.ui }), commonForProdBundled(), {
-    output: {
-      filename: '[name].js',
-      libraryTarget: 'commonjs',
-    },
-    plugins: [
-      // Bundle everything into a single file for CJS
-      new rspack.optimize.LimitChunkCountPlugin({
-        maxChunks: 1,
-      }),
-    ],
-    optimization: {
-      splitChunks: false,
-    },
-  });
-
   // Entry ESM module bundle (no chunks)
   const entryEsm = merge(
     entryForVariant(variants.entry),
@@ -270,29 +257,7 @@ const prodConfig = mode => {
     },
   );
 
-  // Entry CJS module bundle (no chunks)
-  const entryCjs = merge(
-    entryForVariant(variants.entry),
-    common({ mode, variant: variants.entry }),
-    commonForProdBundled(),
-    {
-      output: {
-        filename: '[name].js',
-        libraryTarget: 'commonjs',
-      },
-      plugins: [
-        // Bundle everything into a single file for CJS
-        new rspack.optimize.LimitChunkCountPlugin({
-          maxChunks: 1,
-        }),
-      ],
-      optimization: {
-        splitChunks: false,
-      },
-    },
-  );
-
-  return [uiBrowser, uiEsm, uiCjs, entryEsm, entryCjs];
+  return [uiBrowser, uiEsm, entryEsm];
 };
 
 /**
@@ -338,7 +303,7 @@ const devConfig = (mode, env) => {
   });
 };
 
-module.exports = env => {
+export default env => {
   const mode = env.production ? 'production' : 'development';
   return isProduction(mode) ? prodConfig(mode) : devConfig(mode, env);
 };