fix(lucide-react): Fix dynamic imports (#4210)

* fix(lucide-react): Fix dynamic imports

* Adjust imports

* Format code

* Ignore eslint error

.gitignore

@@ -27,8 +27,10 @@ packages/**/src/dynamicIconImports.ts
 packages/**/DynamicIcon.d.ts
 packages/**/dynamicIconImports.js
 packages/**/dynamicIconImports.d.ts
+packages/**/dynamicIconImports.d.mts
 packages/**/dynamicIconImports.js.map
 packages/**/dynamic.d.ts
+packages/**/dynamic.d.mts
 packages/**/dynamic.mjs.map
 packages/**/dynamic.mjs
 packages/**/LICENSE

packages/lucide-react/dynamic.js

@@ -0,0 +1,4 @@
+// This file is make sure that we can import from "lucide-react/dynamic" without having to specify the extension. This is a workaround for the fact that some bundlers (like Webpack) don't support importing from "lucide-react/dynamic.mjs" without specifying the extension.
+// Unfortunately, we can't use exports field in package.json because it breaks some runtime environments. See https://github.com/lucide-icons/lucide/issues/2743#issuecomment-2626784300
+// eslint-disable-next-line import/no-unresolved
+export * from './dynamic.mjs';

packages/lucide-react/package.json

@@ -29,17 +29,20 @@
   "sideEffects": false,
   "files": [
     "dist",
+    "dynamic.js",
     "dynamic.mjs",
     "dynamic.js.map",
+    "dynamic.d.mts",
     "dynamic.d.ts",
     "dynamicIconImports.mjs",
     "dynamicIconImports.js.map",
-    "dynamicIconImports.d.ts"
+    "dynamicIconImports.d.ts",
+    "dynamicIconImports.d.mts"
   ],
   "scripts": {
     "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm typecheck && pnpm build:bundles",
     "copy:license": "cp ../../LICENSE ./LICENSE",
-    "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.ts && rm -f dynamic.* && rm -f dynamicIconImports.d.ts",
+    "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.ts && rm -f dynamic.{d.ts,d.mts,mts,mjs,mjs.map} && rm -f dynamicIconImports.d.ts",
     "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mts --renderUniqueKey --withAliases --withDynamicImports --separateAliasesFile --separateAliasesFileIgnore=fingerprint --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=index.ts",
     "build:bundles": "rollup -c ./rollup.config.mjs",
     "typecheck": "tsc",

packages/lucide-react/rollup.config.mjs

@@ -21,13 +21,19 @@ const bundles = [
     outputDir: 'dist/esm',
     preserveModules: true,
   },
-
   {
     format: 'esm',
     inputs: ['src/dynamicIconImports.ts', 'src/DynamicIcon.ts', ...aliasesEntries],
     outputDir: 'dist/esm',
     external: [/src/],
     preserveModules: true,
+    paths: (id) => {
+      if (id.match(/src/)) {
+        const [, modulePath] = id.match(/src\/(.*)\.ts/);
+
+        return `./${modulePath}.js`;
+      }
+    },
   },
   {
     format: 'esm',
@@ -63,7 +69,7 @@ const configs = bundles
           ...plugins({ pkg, minify }),
           // Make sure we emit "use client" directive to make it compatible with Next.js
           preserveDirectives({
-            include: ['src/DynamicIcon.ts', 'src/context.ts', 'src/Icon.ts'],
+            include: ['src/lucide-react.ts', 'src/DynamicIcon.ts', 'src/context.ts', 'src/Icon.ts'],
             suppressPreserveModulesWarning: true,
           }),
         ],
@@ -100,6 +106,11 @@ export default [
         file: `dynamicIconImports.d.ts`,
         format: 'es',
       },
+      // Extra declaration file with .d.mts extension for better compatibility with ESM environments
+      {
+        file: `dynamicIconImports.d.mts`,
+        format: 'es',
+      },
     ],
     plugins: [dts()],
   },
@@ -110,6 +121,11 @@ export default [
         file: `dynamic.d.ts`,
         format: 'es',
       },
+      // Extra declaration file with .d.mts extension for better compatibility with ESM environments
+      {
+        file: `dynamic.d.mts`,
+        format: 'es',
+      },
     ],
     plugins: [dts()],
   },