plenti: Content flashes then disappears (Can't hydrate document)
I’m putting this issue here as a placeholder for when someone inevitable hits it. In release v0.2.39 we modified the svelte node_module in order to work with plenti’s new hydration setup. You need that modified version in order to have things work properly.
What you may experience: On the initial page load, when plenti tries to hydrate the static HTML, some of the content will be removed. Then if you try to navigate to other pages, the navbar will remain but all the content will be gone.
What is causing this: This is happening because we’re trying to hydrate the document which isn’t currently supported by Svelte. You’re likely using the standard version of Svelte because you ran an npm update or something similar. If you’re using the modified node_modules/svelte/internal/index.mjs that ships with Plenti, you should not experience this issue.
Long-term fix: You will continue to hit this if you try to update Svelte to a newer version using NPM because the standard lib does not have the fix. We have an open issue to discuss this with the maintainers, so hopefully future versions will accommodate this: https://github.com/sveltejs/svelte/issues/5547. If the proposal is rejected I will have to create a custom injection (likely in cmd/gopack.go or cmd/npm_defaults.go) to add this, but it’s not ideal given changing versions of svelte.
Here are the console errors you will see:
- Firefox:
DOMException: Node.insertBefore: Cannot have more than one Element child of a Document - Chrome:
DOMException: Failed to execute 'insertBefore' on 'Node': Only one element on document allowed.
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 17 (10 by maintainers)
Commits related to this issue
- Update Svelte 3.32.3 to 3.38.3 to fix doc hydration (#76). — committed to plentico/plenti by jimafisk 3 years ago
Cool. That works for me. 12-12:30 PDT. https://meet.jit.si/plentico sounds perfect.
@jimafisk thanks for the support. Note that I updated the fork you made (https://plenti.co/themes/compendium), which includes my TODO list. Already crossed off #2 on the list. 😉
Would you be open to a “zoom” call? It would be helpful to a) align around how my theme fits in with your vision, b) clear up some questions I have on some of my design choices, and c) get your thoughts/insights on the remaining action items. Also, is using the issues comment board the best way to discuss project design/direction? 😉
That’s awesome, thanks for helping grow the ecosystem! Cool idea to make customizable color themes, this will be a great base theme for people who want control over their branding without having to rig up the code themselves.
Your todo list makes a lot of sense, I’m excited for you to roll those features out. Just let me know if you hit any snags along the way, I’d be happy to take a look.
I’m always a fan of releasing early and making improvements over time. I just cloned your project into the https://github.com/plenti-themes/ org and gave you access. I figure this might help with discoverability as we add more themes and also gives them a consistent url, but if you’d prefer to continue working off your repo that’s totally fine! I created a theme page for it on the website as well: https://plenti.co/themes/compendium. When you feel it’s ready we can announce it on our social media and link back to your website or whatever channel you want to promote.
I’m sure folks from https://github.com/plentico/plenti/issues/75 would find articulatePost really helpful. I’ll follow up there so they are aware.