Vite+Solid and lucide-solid, Loading failed for the module

[krishna-santosh]

Package

• lucide
• lucide-angular
• lucide-flutter
• lucide-preact
• lucide-react
• lucide-react-native
• lucide-solid
• lucide-svelte
• lucide-vue
• lucide-vue-next
• Figma plugin
• source/main
• other/not relevant

Version

0.292.0

Browser

• Chrome/Chromium
• Firefox
• Safari
• Edge
• iOS Safari
• Opera
• Other/not relevant

Operating system

• Windows
• Linux
• macOS
• Other/not relevant

Description

Using Vite+Solid(TS)

dev server starts but the webpage doesn't load, Its just blank, no errors in the terminal.

Got this in firefox console when running the dev server.

Loading failed for the module with source “http://localhost:5173/node_modules/.pnpm/[email protected][email protected]/node_modules/lucide-solid/dist/source/icons/sun.jsx?v=4ec9cb1e”. localhost:5173:14:47

When I build it with pnpm build and pnpm preview It works fine. Page loads without any issue.

Steps to reproduce

1. pnpm create vite@latest (and choose solid with TS)
2. pnpm install lucide-solid
3. Add any Lucide icon in the App.tsx
   Ex:

import { Sun } from "lucide-solid";

<Sun />

4. run pnpm dev
5. open http://localhost:5173 in the browser

Checklist

• I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)

[karsa-mistmere]

Hi @krishna-santosh,

So sorry to hear you've run into an issue, however, I've followed the steps and I'm unfortunately unable to reproduce this issue.
Can you please provide a basic reproduction of this error?

[krishna-santosh]

Hello @karsa-mistmere

Here's a Stackblitz Preview of the bug https://stackblitz.com/edit/solidjs-templates-gbewty?file=src%2FApp.tsx

[jguddas]

Hello @karsa-mistmere

Here's a Stackblitz Preview of the bug https://stackblitz.com/edit/solidjs-templates-gbewty?file=src%2FApp.tsx

Thanks for the stackblitz, uncommenting <Sun/> works for me 🤔

[karsa-mistmere]

Yeah, I can confirm that it also works just fine for me in all major browsers (Firefox, Chrome, Edge, Brave and Opera).

Can you please elaborate what the error should look like in Stackblitz?

I don't see anything out of the ordinary:

[krishna-santosh]

After Uncommenting that line and restarting the server, its just blank.

ls1.mp4

[krishna-santosh]

@karsa-mistmere @jguddas Have you had a chance to run this on a Linux machine? because, I just tried the stackblitz link on my windows 11 machine, it works fine, I guess the problem is with my Arch Linux machine

[krishna-santosh]

Loading failed for the module with source “http://localhost:5173/node_modules/.pnpm/[email protected][email protected]/node_modules/lucide-solid/dist/source/icons/sun.jsx?v=4ec9cb1e”. localhost:5173:14:47

This is the error that I get in firefox console on Linux, There's no error in chromium and brave, they just freeze with a blank white screen, even the right click doesn't work.

[karsa-mistmere]

I don't currently have Linux. Can you check if you also get this error with other browsers on Arch Linux.

And just to clarify, you do also experience this issue on Linux with the stackblitz link, right?

[krishna-santosh]

Yes, I get the same error on chromium, brave, and firefox on my Arch machine.

Yes, same problem with the stackblitz link on Linux.

[karsa-mistmere]

Loading failed for the module with source “http://localhost:5173/node_modules/.pnpm/[email protected][email protected]/node_modules/lucide-solid/dist/source/icons/sun.jsx?v=4ec9cb1e”. localhost:5173:14:47

Just to clarify, this is the error you get on stackblitz? Why would that be looking for localhost:5173?

[krishna-santosh]

That is not on stackblitz, that's when I create and run the project locally on my machine. and that too only in firefox I see that message, there's nothing in chromium and brave browser's console.

[karsa-mistmere]

That is not on stackblitz, that's when I create and run the project locally on my machine. and that too only in firefox I see that message, there's nothing in chromium and brave browser's console.

And what error do you get on stackblitz if any?

[krishna-santosh]

No, I don't see any errors on stackblitz

[jguddas]

I can reproduce it on Linux in the stackblitz with both Chrome and Firefox.

[jguddas]

Possibly related to solidjs/solid-start#1112

[krishna-santosh]

Loading failed for the module with source “http://localhost:5173/node_modules/.pnpm/[email protected][email protected]/node_modules/lucide-solid/dist/source/icons/sun.jsx?v=4ec9cb1e”. localhost:5173:14:47

@jguddas Have you encountered a similar error in Firefox as I did?

[jguddas]

Loading failed for the module with source “http://localhost:5173/node_modules/.pnpm/[email protected][email protected]/node_modules/lucide-solid/dist/source/icons/sun.jsx?v=4ec9cb1e”. localhost:5173:14:47

@jguddas Have you encountered a similar error in Firefox as I did?

In Linux+Firefox, I get a bunch of very similar errors and a blank page.

Loading failed for the module with source “https://solidjstemplatesgbewty-wxq5--3000--5a198b5c.local-corp.webcontainer.io/node_modules/.pnpm/[email protected][email protected]/node_modules/lucide-solid/dist/source/icons/zoom-out.jsx?v=96746c63”.

[bartoszkrawczyk2]

Any update on this? I have the same issue, Mac + Chrome.

Edit:

Make sure that you don't have any extensions that can block resources during development. In my case uBlock origin was blocking one of the icon chunks. After disabling uBlock it works without any issue.

[dinnymate]

Make sure that you don't have any extensions that can block resources during development.

I disabled every extension and even tried incognito mode. Blank page, infinite loading, and after a while it crashes the tab ,with no error on console.
Arch Linux + Chrome 121

It's really sad, seemed like a good icon lib, unfortunately it doesn't work at all.

[ericfennis]

@dinnymate can you post the version lucide-solid and the version of solid you used. Maybe it is a new issue

[dinnymate]

I tried with lucide-solid 0.321.0 and solidjs 1.8.12 and 1.7.12 as well. But the stackblitz above does not work either.

Although it might really be a different issue 'cause for me, just importing the icon also breaks everything both locally and stackblitz.

[krishna-santosh]

@ericfennis actually I don't have any extensions either, but still it won't work as I mentioned in the conversation above. It would be better if we reopen this issue.

[stefanadelbert]

I'm experiencing the same problem on my Arch (Manjaro) machine. Brave and Chromium will not load the SolidJS app (blank screen, infinite page load or sometimes "Page Unresponsive"). Firefox will load the app, but it's slow to load.

The minimum repeatable steps for me are,

npx degit solidjs/templates/js lucide-test && cd lucide-test
pnpm install lucide-solid
<Add `import { Camera } from 'lucide-solid';` to App.jsx>
pnpm run start

In the Network tab in all three browsers I can see ~1400 lucide icons get loaded on connecting to the app, even though only a single icon is imported (this is probably expected behaviour I think - tree shaking happens at build time).

Serving the built app (after pnpm run build) locally works perfectly in all browsers and it's clear that the final dist build has been tree-shaken.

I just had an idea that it was solid devtools, but I uninstalled the solid-devtools package and disabled the browser plugin to no avail.

I tried starting up the app in dev mode with the Lucide import commented out and everything loaded perfectly. I then uncommented the Lucide import line and saved the file and I could see in the Network tab of both browsers that the individual icons were requested. Firefox successfully loaded all icons and the app reloaded fine. In Chromium, the last third of the icons were stuck in the "pending" status, from panel-right onwards (see screenshot). This behaviour is repeatable although it doesn't always get stuck at exactly panel-right, but somewhere around there.

solid-js: 1.8.11
lucide-solid: 0.341.0

[stav]

Weird but I also have Arch Manjaro and I can't use Lucide in my Solid project:

Linux legion 5.15.150-1-MANJARO #1 SMP PREEMPT Fri Mar 1 16:56:12 UTC 2024 x86_64 GNU/Linux

It seems Vite is not transpiling the TypeScript file that imports lucide-solid and my dev server has this error:

8:31:59 AM [vite] Internal server error: Failed to resolve entry for package "lucide-solid". The package may have incorrect main/module/exports specified in its package.json.
Plugin: vite:import-analysis

[karsa-mistmere]

Hi @stav & @stefanadelbert, can you please check if v0.354.0 resolves your issues?

[stav]

@karsa-mistmere It works!

[stefanadelbert]

Apologies for not trying this out sooner.

@karsa-mistmere I've just tried with v0.354.0 and v0.358.0, but I'm getting the same behaviour as before, i.e. the problem doesn't appear to be fixed in the latest version.
Please let me know if I can help with any debugging or if you'd like any more information.

[karsa-mistmere]

I'm reopening this since it's not yet been resolved.

[smitpatelx]

For me, the problem was my adblocker. Turning that off for my localhost, made it work.

[TheKnightCoder]

For me, the problem was my adblocker. Turning that off for my localhost, made it work.

Turning off adblock also fixes the issue for me, but why is this the case? and will this also affect production?

[vogler]

npm run dev doesn't do tree-shaking and loads all icons despite me only using one icon.
The unused fingerprint.jsx gets blocked which somehow makes the whole Solid render fail:

Making npm run dev only load the used icons (without fingerprint.jsx) fixes it.
This worked: https://christopher.engineering/en/blog/lucide-icons-with-vite-dev-server/

Alternatively, copying and just importing the used svgs also works.

[ewof]

disabling ublock works
disabling ublock is not a solution
it needs to be disabled even after build or the entire web page just doesn't load, it's not just a problem in dev

[dnswd]

This is happening with Firefox on Linux. Disabling adblock doesn't do it for me, and this is happening in dev server as well.

During my investigation, I found that all the icons in node_modules use a generic dynamic Icon component, which the documentation discourages. I'm not sure if this is the root cause but wanted to highlight it in case anyone has insights.

[dnswd]

I just realized the link @vogler provided better approach by just directly importing the icons. This does resolved my issue. (Still in dev server, with adblock on)

Maybe consider this approach for the library?

Here's my changes to get mine working

// Add a node_modules alias to vite config
resolve: {
    alias: {
      'lucide-solid/icons': path.resolve(__dirname, './node_modules/lucide-solid/dist/source/icons'),
    },
  },

// import the icon
import Trash2 from 'lucide-solid/icons/trash-2'

[karsa-mistmere]

During my investigation, I found that all the icons in node_modules use a generic dynamic Icon component, which the documentation discourages.

Hey @dnswd, I'm afraid this is a misunderstanding – what the documentation actually advises against is importing all icons in your code, because then tree-shaking is kaput and your build size goes 📈.

Using a single generic icon component is fine, as long as you:

1. only import the icons you actually need (but then why would you need a generic component?)
2. import the icons via dynamic import. This is not in any way related to Solid's <Dynamic> component, I think this might be the root of the confusion here.

[warrenbhw]

I think I know what's going on here. Ad blockers such as uBlock and AdBlock try to prevent the loading of tracking scripts, which may include a "fingerprinting" module such as https://fingerprint.com/. Ad blockers see the keyword "fingerprint", which in this case is simply a reference the lucide Fingerprint icon, and assume that this is a fingerprinting script, rather than a literal SVG in the shape of a human fingerprint. As a result, blockers may attempt to disable Javascript on the page or block requests sent to that fingerprint script origin, which causes the app to fail.

Apps built using other JS frameworks may not run into this issue because... they do one of both of these things:

• mangle/obfuscate module names when doing incremental javascript loading
• Perform tree-shaking even when the app is running in development mode, meaning that an app that doesn't use the Fingerprint icon will don't have any requests with the keyword "fingerprint"

I need to verify that this is what's going on, but assuming that this is the case, here are two possible solutions:

1. Lucide could use a name other than "Fingerprint" for the fingerprint icon, to prevent this footgun (recommended solution, but would require approval of the Lucide library authors)
2. Consumers of Lucide icons who are using a framework such as SolidStart could set some kind of framework configuration to work around this issue.

[ericfennis]

I've closed this original issue, should be fixed by #2375. See findings in the PR description.

The fingerprint issue seems another issue. @warrenbhw Lol, that's kinda funny, and a good find.
I assume this only happens during dev right? I think this is also happening with other frameworks as well.
But from my perspective, it is bad practice to use adblockers during development since they can manipulate your DOM.
You can probably disable your ad blocker on localhost domains.

[warrenbhw]

@ericfennis I think the fingerprint issue can happen outside of dev, but need to verify.

I think it usually only shows up in dev because most apps aren't using the Fingerprint icon, so it gets tree-shaken in prod. But depending on bundler/server config, I think you could hit this in prod if you're actually using the Fingerprint icon in your app.

I've created a new issue to track this: #2398

Keen to hear your thoughts!