On many pages, only the last example loads (upstream issue)

[aaronharder]

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!

[Florian-Schoenherr]

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

[TheComputerM]

Don't know, most probably sapper updating might be the cause or could be bad file paths.

[aaronharder]

Downloaded locally and did a little debugging. Looking at this line:

svelte-materialify/packages/docs/src/components/doc/Example.svelte

Line 16 in ba92ccf

import(`../../examples/${dir}/${name}.svelte`).then((data) => {

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!

[aaronharder]

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.

[Florian-Schoenherr]

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

[TheComputerM]

I don't think sapper will be receiving any more updates.

[aaronharder]

Makes sense. Maybe when you/if you guys move the Materialify site to SvelteKit etc this issue will no longer exist. Thanks again!

[Florian-Schoenherr]

@TheComputerM why exactly do we not fix this? Will sapper not merge such a PR anymore?

[bato3]

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