lucide-svelte not working with SvelteKit

[bejd]

This may be more a feature request than a bug, so apologies if it needs to be recategorised!

Prerequisites

• Version: 0.92.0
• Are you running from source/main: Yes
• Are you using a released build: Yes
• Operating system: MacOS 12.6
• Bits: 64

Step to reproduce

• Follow instructions at https://lucide.dev/docs/lucide-svelte
• Import a single icon
• Console displays errors for every icon (see screenshot, possibly related to Project is loading all icons despite only using two. #823)

Actual behavior

Icon components work.

Any message or error

TypeError: error loading dynamically imported module client-manifest.js:20:44

<Error> was created with unknown prop 'data' client.js:1585:7

<Error> was created with unknown prop 'form' client.js:1585:7

<Root> was created without expected prop 'form' client.js:1585:7

Loading failed for the module with source “http://localhost:5173/node_modules/lucide-svelte/dist/esm/icons/accessibility.svelte?v=29d069d5”. test:135:1

Loading failed for the module with source “http://localhost:5173/node_modules/lucide-svelte/dist/esm/icons/activity.svelte?v=29d069d5”. test:135:1

... etc.

Resources

[JustBarnt]

@bejd I don't think is related to my issue, I am not using sveltekit, and my icons are loading, it's just loading every icon in the library compared to the two I am actually using via import.

[ericfennis]

@bejd Thanks for reporting, with take a look!

[mpreu]

Confirming the issue with sveltekit. Is it possible, that vitejs/vite#8464 has relevance here? I tried the mentioned workarounds for the vite config, but does not seem to have any effect for this problem here.

I am on vite 3.1.8.

Also this seems to be a similar report for feather (or large svelte libs in general): sveltejs/kit#2612

[JustBarnt]

@mpreu From what @ericfennis found it has to do with Vites tree-shaking. It's still including the whole module.

[TheFireBlast]

I'm using this hacky workaround using svelte preprocess's replace until they fix their tree-shaking. Can't guarantee it'll work 100% of the time, but it shouldn't be too hard to add any edge cases.

replace: [
    [
        /import\s*{\s*([^}]+?)\s*,?\s*}\s*from\s+['"]lucide-svelte['"](\s*;)?/gim,
        (substring, /**@type {string} */ imports) => {
            return imports
                .split(/\s*,\s*/gim)
                .map((s) => {
                    let icon = s.split(/\s+as\s+/);
                    let name = icon[1] || icon[0];
                    let file = icon[0].replace(/[A-Z]/g, (s) => '-' + s.toLowerCase()).slice(1);
                    return `import ${name} from 'lucide-svelte/dist/esm/icons/${file}.svelte';`;
                })
                .join('');
        },
    ],
],

Result:

// From
import {
    XOctagon,
    MoreVertical,
    ArrowUpDown,
    Image as ImageIcon,
} from "lucide-svelte";
// To
import XOctagon from 'lucide-svelte/dist/esm/icons/x-octagon.svelte';
import MoreVertical from "lucide-svelte/dist/esm/icons/more-vertical.svelte";
import ArrowUpDown from "lucide-svelte/dist/esm/icons/arrow-up-down.svelte";
import ImageIcon from "lucide-svelte/dist/esm/icons/image.svelte";

[ericfennis]

Created a fix in #877. Beta release is released under [email protected]

[ericfennis]

Fixed by #877