diff --git a/.gitignore b/.gitignore index a00849849..87dae184e 100644 --- a/.gitignore +++ b/.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 diff --git a/packages/lucide-react/dynamic.js b/packages/lucide-react/dynamic.js new file mode 100644 index 000000000..658f11c60 --- /dev/null +++ b/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'; diff --git a/packages/lucide-react/package.json b/packages/lucide-react/package.json index 55936ddbe..94863df48 100644 --- a/packages/lucide-react/package.json +++ b/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", diff --git a/packages/lucide-react/rollup.config.mjs b/packages/lucide-react/rollup.config.mjs index cba0ba030..4346b6ee9 100644 --- a/packages/lucide-react/rollup.config.mjs +++ b/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()], },