Fixed antd icons issue with ESM loading (#4872)

Author: heath-freenome

CHANGELOG.md

@@ -28,6 +28,7 @@ should change the heading of the (upcoming) version to include a major version b
 ## Dev / docs / playground
 
 - Updated the `playground` to use the css files for `@rjsf/shadcn` from the CDN connected with github, pointing to the new resources directory
+- Added new `antdIconsReplacer.ts` and used it in `@rjsf/antd` during build time to append `.js` onto imports of `@antd/icons` to fix es build issues on webpack and vite
 
 # 6.1.0
 

packages/antd/package.json

@@ -34,7 +34,7 @@
     }
   },
   "scripts": {
-    "compileReplacer": "tsc -p tsconfig.replacer.json && move-file lodashReplacer.js lodashReplacer.cjs",
+    "compileReplacer": "tsc -p tsconfig.replacer.json && move-file lodashReplacer.js lodashReplacer.cjs && move-file antdIconsReplacer.js antdIconsReplacer.cjs",
     "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.cjs --sourcemap --packages=external --format=cjs",
     "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/antd.esm.js --sourcemap --packages=external --format=esm",

packages/antd/tsconfig.build.json

@@ -15,7 +15,11 @@
     "replacers": {
       "lodash": {
         "enabled": true,
-        "file": "lodashReplacer.cjs"
+        "file": "lodashReplacer.cjs",
+      },
+      "antdIcons": {
+        "enabled": true,
+        "file": "antdIconsReplacer.cjs"
       }
     }
   }

packages/antd/tsconfig.replacer.json

@@ -6,7 +6,8 @@
     "skipLibCheck": true,
   },
   "files": [
-    "../../tsc-alias-replacer/lodashReplacer.ts"
+    "../../tsc-alias-replacer/lodashReplacer.ts",
+    "../../tsc-alias-replacer/antdIconsReplacer.ts"
   ],
   "exclude": [
     "./src",

tsc-alias-replacer/ajvReplacer.ts

@@ -7,8 +7,8 @@ import { AliasReplacerArguments } from 'tsc-alias';
  */
 export default function ajvReplacer({ orig }: AliasReplacerArguments): string {
   if (orig.startsWith("from 'ajv/dist/standalone")) {
-    const origLodashEs = orig.substring(0, orig.length - 1);
-    return `${origLodashEs}/index.js'`;
+    const origAjv = orig.substring(0, orig.length - 1);
+    return `${origAjv}/index.js'`;
   }
 
   return orig;

tsc-alias-replacer/antdIconsReplacer.ts

@@ -0,0 +1,15 @@
+import { AliasReplacerArguments } from 'tsc-alias';
+
+/** A `tsc-alias` replacer that fixes up the imports `from 'ajv/dist/standalone'` to be
+ * `from `ajv/dist/standalone/index.js`
+ *
+ * @param orig - The original import name
+ */
+export default function antdIconsReplacer({ orig }: AliasReplacerArguments): string {
+  if (orig.startsWith("from '@ant-design/icons/")) {
+    const origIcons = orig.substring(0, orig.length - 1);
+    return `${origIcons}.js'`;
+  }
+
+  return orig;
+}

tsc-alias-replacer/lodashReplacer.ts

@@ -7,7 +7,6 @@ import { AliasReplacerArguments } from 'tsc-alias';
 export default function lodashReplacer({ orig }: AliasReplacerArguments): string {
   if (orig.startsWith("from 'lodash/")) {
     const origLodashEs = orig.substring(0, orig.length - 1).replace('lodash/', 'lodash-es/');
-    // console.log(origLodashEs);
     return `${origLodashEs}.js'`;
   }