TheComputerM
On many pages, only the last example loads (upstream issue)
Hello, great project! I'm seeing that many of the examples in your docs appear to be missing.
Just one example: https://svelte-materialify.vercel.app/components/button-groups/
Screen grab:
This issue is happening for me throughout the docs. Not every example, but many of them. Hoping it's a quick fix once the cause of this issue is identified.
Thanks for a great library of components!
@aaronharder try to change page to another component and then back to the one you want to look at (e.g. ButtonGroup -> Button -> ButtonGroup). We haven't found the problem yet, it could be due to a version upgrade (on sapper/rollup/?). @TheComputerM any ideas? When I tested, the dynamic imports still worked (logged out the module).
Don't know, most probably sapper updating might be the cause or could be bad file paths.
Downloaded locally and did a little debugging. Looking at this line:
https://github.com/TheComputerM/svelte-materialify/blob/ba92ccf334c1af8d16e75eb5d1f3ae558553c12a/packages/docs/src/components/doc/Example.svelte#L16
Seems like the import is definitely being attempted every time, but is frequently failing. Tried adding a ".catch()" to my local copy, but nothing came through. Apparently the promise returned by import() just hangs and never returns sometimes? Anyway, seems definitively like a problem not of your making. Too bad. Thanks for looking!
Hello again. I noticed that it is the LAST <Components.Example /> instance on a given page that ALWAYS works fine. This piqued my curiosity so I dug into the Sapper code and found what I believe to be the root issue in their CSS inject_styles mechanism. If you look at this code from Sapper:
https://github.com/sveltejs/sapper/blob/6ef55208699f223ca3e12184362400ce3f2e3db8/src/core/create_compilers/RollupCompiler.ts#L53
They're tying their Promise resolution to a link.onload assignment. However, multiple assignments to the same link element will of course only result in the LAST one working. To fix, I hand-patched the Sapper code to replace the onload and onerror assignments with their addEventListener equivalents:
link.addEventListener('load', function () {
return fulfil();
});
link.addEventListener('error', reject);
In my local tests, this fixes the problem!
Not sure if you guys might have more clout than I do in reporting this issue to the Sapper project. If so, I'm happy for you to report it. If not, let me know and I will be glad to make a report.
Thanks again for your great work on these Material components for Svelte.
@TheComputerM you seem to have some more clout? @aaronharder last instance was what I noticed too, forgot to mention that. If @TheComputerM doesn't report in a matter of 24 hours, please go ahead! This btw is a regression, it worked before (most probable cause: sapper ^0.28.10 -> ^0.29.0) Edit: Just looked into all changes from 28.10 - 29.0, maybe it's not that.
Makes sense. Maybe when you/if you guys move the Materialify site to SvelteKit etc this issue will no longer exist. Thanks again!
@TheComputerM why exactly do we not fix this? Will sapper not merge such a PR anymore?
@Florian-Schoenherr My info can be outdated, but when a year ago I ask a similar question, they gave me an answer:
We are focusing on Svelte, and until it isn't to be stable we stop to maintain Sapper. (Some changes in Svelte may affect the Sapper.)
//Edit:
From FAQ:
No new features will be added to Sapper and all development will be focused on SvelteKit.
