Skip to content

feat(ui): Switch to ESM only builds #7264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 21, 2025
Merged

feat(ui): Switch to ESM only builds #7264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/themes/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
"outDir": "dist",
"baseUrl": ".",
"lib": ["es6", "dom"],
"module": "nodenext",
"moduleResolution": "nodenext",
"module": "ESNext",
"moduleResolution": "bundler",
"importHelpers": true,
"declaration": true,
"declarationMap": false,
Expand Down
12 changes: 5 additions & 7 deletions packages/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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",
Copy link
Member

@dstaley dstaley Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"type": "module" will treat all files in the current directory as ESM by default, so shouldn't this be rspack.config.js? I don't think we need the .mjs extension.

"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",
Expand Down
59 changes: 12 additions & 47 deletions packages/ui/rspack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);

Comment on lines +2 to 12
Copy link
Member

@panteliselef panteliselef Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nikosdouvlis do we still need this file ?

Copy link
Member Author

@nikosdouvlis nikosdouvlis Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tagging @dstaley to answer both questions at the same time :)
rspack.config.mjs should be rspack.config.js - I think I managed to stage only some of the changes and the delta here is weird. Pushing a fix in a bit

const isProduction = mode => mode === 'production';
const isDevelopment = mode => !isProduction(mode);
Expand Down Expand Up @@ -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),
Expand All @@ -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];
};

/**
Expand Down Expand Up @@ -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);
};
Loading