π Nuxt muddling elements in rendered output #bug
I've seen this before but thought it was maybe a Nuxt Content bug (I even raised an issue); now I've seen it in a non-Content page.
But essentially, Nuxt seems to omit, duplicate, even muddle the order of rendered elements.
In the attached screenshots, the end text should render as:
But instead, it renders as:
The server HTML is correct, it seems to be the rendered HTML that is wrong.
I've checked the GitHub source (attached) and redeployed, but the output is still wrong (attached).
This is the live page:
- https://controlspace.app/auth/post-sign-up
Is this a known bug? Nuxt version (quite old) is 3.6.5.
13 Replies
Indeed, reloading the page with JavaScript disabled renders the attached.
Additionally, it only seems to happen after a build / preview, not during development.
Or Maybe a hydration error undercover
Iβd focus on updating Nuxt first π
Hey Alex, yeeah, I think that's probably the best bet, though I've been holding off because of this bug:
https://github.com/nuxt/cli/issues/169
https://github.com/davestewart/nuxt-content-assets/issues/49#issuecomment-1719327223
Not sure if you have insight on that? Honestly, I find this situation quite depressing.
GitHub
nuxi
prepare or build hangs Β· Issue #169 Β· nuxt/cliEnvironment Operating System: Darwin Node Version: v20.5.1 Nuxt Version: 3.7.0 CLI Version: 3.7.0 Nitro Version: 2.6.1 Package Manager: [email protected] Builder: - User Config: experimental, css, ssr, nit...
GitHub
Nitro Build gets stuck at "You can preview this build using node .o...
Background Using this module to serve relative images with nuxt content, runs as expected while in dev. Issue When running npm run build (both on server or local) with the module enabled on the nux...
I don't think that it is a nuxt issue but nuxt-content-assets keeping watchers open
Didn't dive in the source of the plugin though
I'll run an update and report back. π€
So that did not solve the problem.
I've tried all kinds of things in the meantime, like removing components, markup, etc, etc. constantly rebuilding and re-previewing; it still happens.
I guess if this probably is a hydration error, I should just have the server render this route and move on.
Is it worth reporting this bug to the Nuxt repo?
I couldn't provide a repo, other than allowing maintainers to checkout this commit (it's a private repo).
very strange.
Well, if you could provide a dumbed down repo that'd be most helpful
chances are it isn't a framework bug though
Let me clone the repo and start removing stuff.
Credit to this version of Nuxt tho; page transitions are finally up to the speed of VuePress π
It seems routeRules / prerender still hydrates (and causes the error).
What's the best way to prevent hydration on a page?
none, hydration is necessary so it is working as SPA eventually π
you can of course disable all of the JS for a page, but not sure if that's what you desire π
Ah, the
experimentalNoScripts setting. OK, will get it all live and see how it looks.
Thanks as usual.no problem π
Yeah, experimentalNoScripts did bad things!
- killed client-only
- killed nuxt-lazy-load
π to self
Killed everything JS-related π
It's easy to forget when buried in route rules !