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
• [X] lucide-solid
• [ ] lucide-svelte
• [ ] lucide-vue
• [ ] lucide-vue-next
• [ ] Figma plugin
• [ ] source/main
• [ ] other/not relevant

Version

0.292.0

Browser

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

Operating system

• [ ] Windows
• [X] 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

• [X] 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.

https://github.com/lucide-icons/lucide/assets/75202541/63a61694-68d4-4b55-a756-dffbb1bfa62b

[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 https://github.com/solidjs/solid-start/issues/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.