Improved ESM support for all public packages

- Updated the building of ESM modules to run `tsc-alias` to append the `.js` extensions onto the imports for ESM builds - For those builds that use `lodash` also added a replacer for the `tsc-alias` that switches things to use `lodash-es`
rjsf-team · Mar 5, 2025 · 9a86802 · 9a86802
1 parent fe30e3b
commit 9a86802
Show file tree

Hide file tree

Showing 37 changed files with 511 additions and 19 deletions.
diff --git a/.gitignore b/.gitignore
@@ -140,3 +140,5 @@ out/
 
 # typescript tsbuildinfo
 *.tsbuildinfo
+lodashReplacer.js
+
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,9 +19,14 @@ should change the heading of the (upcoming) version to include a major version b
 
 ## @rjsf/utils
 
-- fixed issue with customValidate errors are not cleared when the form is valid [4365](https://github.com/rjsf-team/react-jsonschema-form/pull/4365) due to regression
+- Fixed issue with customValidate errors are not cleared when the form is valid [4365](https://github.com/rjsf-team/react-jsonschema-form/pull/4365) due to regression
 - Add missing `experimental_customMergeAllOf` argument to `ensureFormDataMatchingSchema` introduced by [4388](https://github.com/rjsf-team/react-jsonschema-form/pull/4388)
 
+## Dev / docs / playground
+
+- Improved the ESM support for all public packages by adding explicit `exports` to each public `package.json`
+- Updated the ESM builds to use `tsc-alias` to add `.js` onto all ESM imports
+
 # 5.24.3
 
 ## @rjsf/utils

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -60,6 +60,7 @@
     "prettier": "^2.8.8",
     "rimraf": "^5.0.5",
     "ts-jest": "^29.1.2",
+    "tsc-alias": "^1.8.11",
     "tslib": "^2.6.2",
     "typescript": "^4.9.5"
   },
@@ -79,6 +80,5 @@
     "packages/validator-ajv6",
     "packages/validator-ajv8",
     "packages/snapshot-tests"
-  ],
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  ]
 }
diff --git a/packages/antd/package.json b/packages/antd/package.json
@@ -5,8 +5,15 @@
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "exports": {
+    "require": "./dist/index.js",
+    "node": "./dist/index.js",
+    "import": "./lib/index.js",
+    "types": "./lib/index.d.ts"
+  },
   "scripts": {
-    "build:ts": "tsc -b",
+    "compileReplacer": "tsc -p tsconfig.replacer.json",
+    "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.js --sourcemap --packages=external --format=cjs",
     "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/antd.esm.js --sourcemap --packages=external --format=esm",
     "build:umd": "rollup dist/antd.esm.js --format=umd --file=dist/antd.umd.js --name=@rjsf/antd",

diff --git a/packages/antd/tsconfig.build.json b/packages/antd/tsconfig.build.json
@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./lib"
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./src"
+    }
+  ],
+  "tsc-alias": {
+    "resolveFullPaths": true,
+    "verbose": true,
+    "replacers": {
+      "lodash": {
+        "enabled": true,
+        "file": "lodashReplacer.js"
+      }
+    }
+  }
+}
diff --git a/packages/antd/tsconfig.replacer.json b/packages/antd/tsconfig.replacer.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es2017",
+    "outDir": "./",
+    "skipLibCheck": true,
+  },
+  "files": [
+    "../../tsc-alias-replacer/lodashReplacer.ts"
+  ],
+  "exclude": [
+    "./src",
+    "./test"
+  ]
+}
diff --git a/packages/bootstrap-4/package.json b/packages/bootstrap-4/package.json
@@ -4,6 +4,12 @@
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "exports": {
+    "require": "./dist/index.js",
+    "node": "./dist/index.js",
+    "import": "./lib/index.js",
+    "types": "./lib/index.d.ts"
+  },
   "description": "Bootstrap 4 theme, fields and widgets for react-jsonschema-form",
   "files": [
     "dist",
@@ -15,7 +21,7 @@
     "url": "git+https://github.com/rjsf-team/react-jsonschema-form.git"
   },
   "scripts": {
-    "build:ts": "tsc -b",
+    "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.js --sourcemap --packages=external --format=cjs",
     "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/bootstrap-4.esm.js --sourcemap --packages=external --format=esm",
     "build:umd": "rollup dist/bootstrap-4.esm.js --format=umd --file=dist/bootstrap-4.umd.js --name=@rjsf/bootstrap-4",

diff --git a/packages/bootstrap-4/tsconfig.build.json b/packages/bootstrap-4/tsconfig.build.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./lib"
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./src"
+    }
+  ]
+}
diff --git a/packages/chakra-ui/package.json b/packages/chakra-ui/package.json
@@ -5,13 +5,19 @@
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "exports": {
+    "require": "./dist/index.js",
+    "node": "./dist/index.js",
+    "import": "./lib/index.js",
+    "types": "./lib/index.d.ts"
+  },
   "files": [
     "dist",
     "lib",
     "src"
   ],
   "scripts": {
-    "build:ts": "tsc -b",
+    "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.js --sourcemap --packages=external --format=cjs",
     "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/chakra-ui.esm.js --sourcemap --packages=external --format=esm",
     "build:umd": "rollup dist/chakra-ui.esm.js --format=umd --file=dist/chakra-ui.umd.js --name=@rjsf/chakra-ui",

diff --git a/packages/chakra-ui/tsconfig.build.json b/packages/chakra-ui/tsconfig.build.json
@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./lib"
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./src"
+    }
+  ],
+  "tsc-alias": {
+    "resolveFullPaths": true,
+    "verbose": true,
+  }
+}
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -3,7 +3,8 @@
   "version": "5.24.3",
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
   "scripts": {
-    "build:ts": "tsc -b",
+    "compileReplacer": "tsc -p tsconfig.replacer.json",
+    "build:ts": "npm run compileReplacer && rimraf ./lib && tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.js --sourcemap --packages=external --format=cjs",
     "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/index.esm.js --sourcemap --packages=external --format=esm",
     "build:umd": "rollup dist/index.esm.js --format=umd --file=dist/core.umd.js --name=JSONSchemaForm",
@@ -27,6 +28,12 @@
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "exports": {
+    "require": "./dist/index.js",
+    "node": "./dist/index.js",
+    "import": "./lib/index.js",
+    "types": "./lib/index.d.ts"
+  },
   "files": [
     "dist",
     "lib",

diff --git a/packages/core/tsconfig.build.json b/packages/core/tsconfig.build.json
@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./lib"
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./src"
+    }
+  ],
+  "tsc-alias": {
+    "resolveFullPaths": true,
+    "verbose": true,
+    "replacers": {
+      "lodash": {
+        "enabled": true,
+        "file": "lodashReplacer.js"
+      }
+    }
+  }
+}
diff --git a/packages/core/tsconfig.replacer.json b/packages/core/tsconfig.replacer.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es2017",
+    "outDir": "./",
+    "skipLibCheck": true,
+  },
+  "files": [
+    "../../tsc-alias-replacer/lodashReplacer.ts"
+  ],
+  "exclude": [
+    "./src",
+    "./test"
+  ]
+}
diff --git a/packages/fluent-ui/package.json b/packages/fluent-ui/package.json
@@ -4,14 +4,20 @@
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "exports": {
+    "require": "./dist/index.js",
+    "node": "./dist/index.js",
+    "import": "./lib/index.js",
+    "types": "./lib/index.d.ts"
+  },
   "description": "Fluent UI theme, fields and widgets for react-jsonschema-form",
   "files": [
     "dist",
     "lib",
     "src"
   ],
   "scripts": {
-    "build:ts": "tsc -b",
+    "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.js --sourcemap --packages=external --format=cjs",
     "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/fluent-ui.esm.js --sourcemap --packages=external --format=esm",
     "build:umd": "rollup dist/fluent-ui.esm.js --format=umd --file=dist/fluent-ui.umd.js --name=@rjsf/fluent-ui",

diff --git a/packages/fluent-ui/tsconfig.build.json b/packages/fluent-ui/tsconfig.build.json
@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./lib"
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./src"
+    }
+  ],
+  "tsc-alias": {
+    "resolveFullPaths": true,
+    "verbose": true,
+  }
+}
diff --git a/packages/fluentui-rc/package.json b/packages/fluentui-rc/package.json
@@ -3,7 +3,7 @@
   "version": "5.24.3",
   "description": "FluentUI React Components theme, fields and widgets for react-jsonschema-form",
   "scripts": {
-    "build:ts": "tsc -b",
+    "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.js --sourcemap --packages=external --format=cjs",
     "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/index.esm.js --sourcemap --packages=external --format=esm",
     "build:umd": "rollup dist/index.esm.js --format=umd --file=dist/core.umd.js --name=JSONSchemaForm",
@@ -27,6 +27,12 @@
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "exports": {
+    "require": "./dist/index.js",
+    "node": "./dist/index.js",
+    "import": "./lib/index.js",
+    "types": "./lib/index.d.ts"
+  },
   "files": [
     "dist",
     "lib",
Original file line number	Diff line number	Diff line change
Expand Up		@@ -140,3 +140,5 @@ out/

		# typescript tsbuildinfo
		*.tsbuildinfo
		lodashReplacer.js