Preline with svelte on Netlify cannot work

[ziedHamdi]

trafficstars

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.

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:

	import { HSDropdown } from "preline"

	// preline needs this to be called: https://preline.co/docs/frameworks-svelte.html
	afterNavigate(() => {
		HSDropdown.autoInit();
	});

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\[email protected]\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?

[jahaganiev]

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!

[ziedHamdi]

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. That ensures that the web client only downloads the files needed by the app and is actually a warranty for performance and for good SEO scores.

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...

Finally, pointing to the classes directly from code fails, I think there's an issue there that has nothing to do with Netlify.

Cheers,

[ziedHamdi]

Sorry i closed the issue unintentionally as I'm answering from my phone

[kpietraszko]

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.

[jahaganiev]

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

[jahaganiev]

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!

[kpietraszko]

Meanwhile, you may use Preline Plugin as separate modules

@jahaganiev I can, but the size is an even bigger issue then. For example importing @preline/accordion and @preline/dropdown adds 130kB each to the bundle. So 260kB for 2 components. Something is wrong, and other libraries handle it differently, but some research would be required.

I'm using Vite and vite-bundle-visualizer.

[ziedHamdi]

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\[email protected]\node_modules\preline\dist\preline.js:2:224)

Hey @jahaganiev

There's an issue in the preline sources I think since this error is happening in the preline sources 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\[email protected]\node_modules\preline\dist\preline.js:2:224)

@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?

[kpietraszko]

@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.

[jahaganiev]

@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!

[jahaganiev]

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\[email protected]\node_modules\preline\dist\preline.js:2:224)

Hey @jahaganiev

There's an issue in the preline sources I think since this error is happening in the preline sources 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\[email protected]\node_modules\preline\dist\preline.js:2:224)

@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?

Hey @ziedHamdi - sorry, thought that happened for the modified source code part, re-opening the issue in case others might share some guidance.

[jahaganiev]

@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.

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!

[jahaganiev]

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!