Sveltekit runs out of memory.

[weepy]

Using sveltekit's "npm build" - all the icons need transforming - even if not used. node_modules/.pnpm/lucide-svelte@0.252.0_svelte@3.59.2/node_modules/lucide-svelte/dist/svelte/icons/venetian-mask.svelte

Very slow of course, but also cause the builder to run out of memory :(

Steps To Reproduce

npm run build

[ericfennis]

@weepy Can you provide a repository to reproduce this?

[weepy]

npm create svelte@latest my-app
cd my-app
pnpm install
pnpm i lucide-svelte

<script>
    import { Trash2 } from "lucide-svelte"
</script>
<Trash2 size="50" />

npm run build

"transforming (396) node_modules/.pnpm/lucide-svelte@0.253.0_svelte@4.0.0/node_modules/lucide-svelte/dist/svelte/icons/codepen.svelte"
✓ 1267 modules transformed
then
✓ 1247 modules transformed.

The majority of these are lucide-svelte. It runs OK on my macbook pro, but takes much longer than expected. On my Linode it runs out of memory. Suspect it might not work on Vercel.

[weepy]

As a work around - converting the imports to import Settings from "lucide-svelte/dist/svelte/icons/settings.svelte" works ok.

[ericfennis]

Thanks for the extra information, this a related issue to #1284 . This is something we need to look into, we had a time we all compiled and transpile all svelte files but that caused some issues in some compilers. So we switched to svelte components imports like they mention in the SvelteKit docs. But maybe better if we switch back and fix those issues. Not sure if it will fix the out-of-memory issue, but I assume this has something to do with the Vite transpiling jobs running parallel, vite has some issues with this.

[weepy]

I think b/c you have export * from './icons'; then there can't be any tree shaking and so it ends up transforming every icon rather than just the ones you need.

[ericfennis]

@weepy That's maybe possible, we should validate this.

[weepy]

I think to do this like you are imagining you need a build step that creates lucide-svelte.ts to look something like this

import X from "./icons/x/svelte"
export X
... etc

This would allow the treeshaking to work as expected.

On Tue, Jun 27, 2023 at 10:28 PM Eric Fennis @.***> wrote:

@weepy https://github.com/weepy That's maybe possible, we should validate this.

— Reply to this email directly, view it on GitHub https://github.com/lucide-icons/lucide/issues/1403#issuecomment-1610168843, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAAGNDWVBYXJQ23MBL7OXDXNM677ANCNFSM6AAAAAAZVSADGM . You are receiving this because you were mentioned.Message ID: @.***>

[marvin-j97]

Same seems to be happening when using Astro (which is also based on Vite like SvelteKit). Importing also absolutely kills VS Code.

[gusvianadev]

I'm having the same issue with Solid.js if it helps. I import one icon but it's importing every single one.

[rbozan]

So this error is also plaguing me on CI as my CI is now also out of memory. You can use MAX_OLD_SPACE_SIZE as a temporary workaround but I'd rather see it fixed in this module.

[ericfennis]

I took some time trying to explain why this is still an issue. See my latest comment in #1475.

TLDR; I Need a Svelte expert to explain me: Should Lucide use Pre-transformation or Svelte Components?

[ericfennis]

I created a beta release on lucide-svelte@0.269.0-beta.0. In this release the conditional exports property is added, this probably also fixes this issue.

If someone can test this as well, that would be nice!

npm install lucide-svelte@0.269.0-beta.0

[rbozan]

0.269.0-beta.0

Personally seeing this while doing build:

8:00:35 AM [vite-plugin-svelte] WARNING: The following packages use a svelte resolve configuration in package.json that has conflicting results and is going to cause problems future.

lucide-svelte@0.269.0-beta.0

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#conflicts-in-svelte-resolve for details.

Besides it's still transpiling everything for me. Not sure if something went wrong on my side.

[ericfennis]

@rbozan Thanks for testing. Will take a look at this one!

[benbucksch]

With this fixed in #1499, the path to directly import icons is:

  import VideoIcon from 'lucide-svelte/icons/video'

This works for me. (Of course, replace Video/video with the name of the icon you need.)

This should now be listed in the README as the recommended way, and import { VideoIcon } from 'lucide-svelte' should be warned against in the README.

[gyurielf]

I'm having the same issue nowadays.

import { ChevronDown, ChevronUp, Trash2 } from 'lucide-svelte';

On build transformed all of the modules(icons).