Content flashes then disappears (Can't hydrate document) #76
Comments
|
Another important note: If you upgrade to |
|
From https://lihautan.com/compile-svelte-in-your-head-part-1/#m-target-anchor:
Related issues: |
|
It looks like this might be resolved: sveltejs/svelte@04bc37d That's huge because it will allow folks to manage their own version of Svelte with NPM going forward. This is great if the version of Svelte included with Plenti falls behind or someone's requirements force them to lock to a specific version for whatever reason. |
|
This should be resolved in v0.4.25. |
|
hi @jimafisk, I believe that I am having the "same" issue, however it could be a new issue. I'm using using v0.4.26 to develop a new Plenti template using Tailwind CSS. I published my development site (https://www.quantifiedleap.com/) using this template to Cloudflare pages. Basically the content would flash and disappear as mentioned in this issue and Chrome would generate a misleading error in the console. This issue is not happening locally... only when pushed to Cloudflare pages. That said, I implemented a work-around to "make" it work:
Thoughts? |
|
Hi @roobyz, Quantified Leap is looking awesome 👍. Is this the repo for the base template: https://github.com/roobyz/plenti-compendium When I inspect the site, it looks like the console errors are related to live reload: Screenshot
and When you're running your build command during CI, are you passing the |
|
Hi @jimafisk... thanks for the kudos. Need to wrap up the tag and category pages, and add maybe some api calls to wire up the send contact button, but it's definitely getting there. Thanks for helping to make this possible! Yes, you found the repo for the base template. Correct also, on the console errors. I am passing the Without the
|
|
Any chance you could try building on Cloudflare without the |
|
@jimafisk... As requested, I pushed the static files to Cloudflare pages without the I am building the static site locally and then pushing the static files for Cloudflare pages to consume. Check out my scripts section of the package.json on plenti-compendium. Cloudflare pages supports a number of static site generators by default, but plenti isn't there yet. I could use Cloudflare workers to do it, but that was extra work and slower so I went with local build. ;-) |
|
I think I've figured out what's going on here and I believe it's related to baseurls (#68). I spun up a version of your site and was having the same issue, but with a few tweaks it seems to be working now: https://jimafisk.github.io/plenti-compendium/. There are two potential solutions:
Option two is probably the fastest / easiest since you're using a custom url. I only went with option one because my test site is hosted in a subfolder on github pages. Let me know if that gives you any trouble! |
|
Thanks @jimafisk! That sorted it. Funny thing is that I went through all the layout files and updated the URLs to account for baseurl and hadn't considered the css and json files. The only "correction" I made to your updates above is that I fixed the "tailwind.source.css" located in the styles folder. This overwrites the "tailwind.global.css" in the assets folder when building for production (purge/minify) or development (complete tailwind css). ;-) |
|
Ah yes that makes sense! Your theme is lovely, is it something you'd like to let other people use? I'd love to feature it on the website if that's something you're interested it: https://plenti.co/themes. No pressure if it's intended for your specific brand! Nice work :) |
|
Yes, my plan is to make the compendium template usable for others. I'll do some extra branding on my quantifiedleap site, beyond the template, which will be my own. I made the template so that folks can modify key values on the The template is not quite finished yet. I have a few TODOs:
Any feedback or suggestions appreciated. ;-) Be nice to have at least points 1 and 2 finished before going "public". That said, it doesn't have to be perfect right away, right? BTW, I created another project in parallel (articulatePost), so that I could write my posts in markdown, and transforms the posts to JSON. Mostly so that I could also cross-post RMarkdown files, provide code highlighting and Katex math capabilities for data science related projects. |
|
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 #75 would find articulatePost really helpful. I'll follow up there so they are aware. |
|
@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? ;-) |
|
Let's hop on a call! You're west coast right? My schedule is pretty flexible tomorrow (8/5) during the day, do you want to talk at 3pm EDT (12 noon PDT)? We can just use https://meet.jit.si/plentico unless you prefer a different service. Yeah for now throwing ideas, questions, etc into issues is the easiest way to go. If that gets too cluttered down the road I might move things to a discussion board. Thanks! |
|
Cool. That works for me. 12-12:30 PDT. https://meet.jit.si/plentico sounds perfect. |
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
documentwhich isn't currently supported by Svelte. You're likely using the standard version of Svelte because you ran annpm updateor something similar. If you're using the modifiednode_modules/svelte/internal/index.mjsthat 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: sveltejs/svelte#5547. If the proposal is rejected I will have to create a custom injection (likely in
cmd/gopack.goorcmd/npm_defaults.go) to add this, but it's not ideal given changing versions of svelte.Here are the console errors you will see:
DOMException: Node.insertBefore: Cannot have more than one Element child of a DocumentDOMException: Failed to execute 'insertBefore' on 'Node': Only one element on document allowed.The text was updated successfully, but these errors were encountered: