New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Preline with svelte on Netlify cannot work #204
Comments
Hey @ziedHamdi! This is needs to be configured for Netlify by some sort of custom build commands. Something like copy necessary files from node_modules to another directory such as a dist folder. I don't think we can adjust docs based on Netlify only but we are open for any suggestions to improve docs for other environments. Cheers! |
Hi @jahaganiev Jaha, Thanks for the reply, I appreciate that. I think Netlify only reveals a hidden issue. It's when I started reading why Netlify was deleting the node_modules folder that it hit me that they are right! That folder should be safe to delete after compile as all needed dependencies should already be packed in the app. So it was discovered thanks to Netlify, but it's not specific to it. I've also read that it's bad practice to point to files in node_modules, that's rather the job of the node engine to resolve where it should find dependencies...
Cheers, |
Sorry i closed the issue unintentionally as I'm answering from my phone |
Regarding the tree-shaking subject. Since preline doesn't seem to be shakable at all, using just a single component bloats the app bundle by ~140kB. I think components should also be exposed as separate modules. Importing those explicitly in code would also solve OP's issue on Netlify. |
@kpietraszko We will look into how it can be enhanced.. Meanwhile, you may use Preline Plugin as separate modules e.g. Dropdowns |
Hey @ziedHamdi Zied! The issue doesn't seem directly causing because of Preline UI sources. However, please correct me If I misunderstood - we are open for suggestions and improvements. Cheers! |
@jahaganiev I can, but the size is an even bigger issue then. For example importing I'm using Vite and vite-bundle-visualizer. |
Hey @jahaganiev There's an issue in the preline sources I think since this error is happening in the preline sources @kpietraszko I found different module files in my node_modules/preline so I'm not sure to understand what you mean. I know that when I compiled my source with vite, it built into a single file, maybe you have a version built with vite? or am I missing sth? |
@jahaganiev Take note of the size of those module files, they're mostly the same (large) size. It seems every module contains component+common dependencies. So when you import multiple component modules, these dependencies are effectively duplicated (and un-tree-shakeable). That's all I can tell, as I'm unfamiliar with the codebase, and best practices for such submodules. |
@kpietraszko our team is looking into it - thanks for catching and reporting it! |
Hey @ziedHamdi - sorry, thought that happened for the modified source code part, re-opening the issue in case others might share some guidance. |
v2.0.3 update has just been pushed with an improvement in file sizes. If you are still having an issue, please open a new issue with more details. Thanks! |
Hey @ziedHamdi - closing the issue for now, we haven't get any similar reports related to Preline UI's script. Please feel free to let us know if you have any updates or workarounds. Thanks! |
Using preline as described in the sveltekit doc is not possible with Netlify as node_modules get deleted after building. Which is a good thing as tree shaking is supposed to have taken all necessary files and node_modules should no longer be needed.
So the line in the docs saying to insert a link to node_modules is actually bad practice. And finding a workaround in Netlify seems inappropriate.
<script src="node_modules/preline/preline.js"></script>So I tried to workaround differently, by importing preline components in my code to tree shake them individually
This is what I attempted in my +layout.svelte file:
However, that led to this error:
1:52:50 PM [vite] Error when evaluating SSR module /src/routes/+layout.svelte: failed to import "preline"
|- ReferenceError: self is not defined
at Object. (C:\Users\zhamd\work\svelte-user-credits\node_modules.pnpm\preline@2.0.2\node_modules\preline\dist\preline.js:2:224)
at Module._compile (node:internal/modules/cjs/loader:1254:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at ModuleWrap. (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
Any hints?
The text was updated successfully, but these errors were encountered: