vite bundling unused components from external libraries (SSR)
o/ question, i'm using https://github.com/x64Bits/solid-icons for icons and while i really like it, it seems to be including icons that i'm not using in the final build. my website is SSR'd and deployed in vercel, and it's complaining that the
render function is too big. is there anything i can do to make it exclude icons i am not using?GitHub
GitHub - x64Bits/solid-icons: The simplest way to use icons in SolidJS
The simplest way to use icons in SolidJS. Contribute to x64Bits/solid-icons development by creating an account on GitHub.
18 Replies
it should tree-shake them
they are exported as separate function from what I see
https://www.npmjs.com/package/solid-icons?activeTab=code
npm
solid-icons
Modern solution for use icons on SolidJS. Latest version: 1.0.12, last published: 10 days ago. Start using solid-icons in your project by running
npm i solid-icons. There are 17 other projects in the npm registry using solid-icons.there is something wrong
why is the file
index.mjs as if the default is cjsehh what is it supposed to be?
(meant to quote the second message)
also is it not tree-shaking them? because for some reason the bundle size is 7 mb 🥴
I'm not sure what is wrong
either it's how you use them (I doubt that)
or the way your vite project is setup
my vite project uses the Vercel plugin
here's the project: https://github.com/Revxrsal/portfolio
this is what vercel uses
if you build locally without the adapter, does it work fine?
yeah, the adapter is just needed for vercel deployment
same bundle without adapter?
yeah. apparently its just the vercel plugin that bundles the icons for the
.vercel output dirhere's the plugin: https://www.npmjs.com/package/solid-start-vercel
npm
solid-start-vercel
Adapter for Solid apps that work on Vercel.. Latest version: 0.3.5, last published: 20 days ago. Start using solid-start-vercel in your project by running
npm i solid-start-vercel. There are no other projects in the npm registry using solid-start-vercel.i tried removing the solid-icons dependency and copy-pasting the icons i needed, and that seemed to fix the bundle size error
but it created another, very weird problem
https://discord.com/channels/722131463138705510/1141806554870448188/1141806554870448188
an error would appear whenever i open the page, and disappear after a simple F5 refresh
i think this is just a fast refresh, no?
i thought so, but it appears on my production website 🥴
when i navigate between a page that has no icons to a page that contains icons, it appears
Hi @Revxrsal , My builds of start, astro, cloudflare and static are only building the icons imported into the project, is it possible that it is just an adapter problem? according to this last error you mention, it was solved since 1.1.0
I don't know, I don't think the problem occurred with the static adapter. Yeah it's probably with the vercel adapter
updated solid-icons, apparently they've fixed wit SSR. issue seems to be gone. i'm really happy
Happy to hear that! 🙌🏼