N
Nuxtβ€’5mo ago
davestewart

πŸ› 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: 
If you need help getting started, you can review the first use instructions.

Thanks for trying Control Space!

All the best
Dave
If you need help getting started, you can review the first use instructions.

Thanks for trying Control Space!

All the best
Dave
But instead, it renders as: 
If you need help getting started, you can review the first use instructions.

Thanks for trying Control Space!

If you need help getting started, you can review the first use instructions.
If you need help getting started, you can review the first use instructions.

Thanks for trying Control Space!

If you need help getting started, you can review the first use instructions.
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.
No description
No description
13 Replies
davestewart
davestewartβ€’5mo ago
Indeed, reloading the page with JavaScript disabled renders the attached. Additionally, it only seems to happen after a build / preview, not during development.
No description
manniL
manniLβ€’5mo ago
Or Maybe a hydration error undercover I’d focus on updating Nuxt first πŸ‘€
davestewart
davestewartβ€’5mo ago
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/cli
Environment 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: npm@9.8.0 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...
manniL
manniLβ€’5mo ago
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
davestewart
davestewartβ€’5mo ago
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).
manniL
manniLβ€’5mo ago
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
davestewart
davestewartβ€’5mo ago
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?
manniL
manniLβ€’5mo ago
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 πŸ˜„
davestewart
davestewartβ€’5mo ago
Ah, the experimentalNoScripts setting. OK, will get it all live and see how it looks. Thanks as usual.
manniL
manniLβ€’5mo ago
no problem πŸ‘
davestewart
davestewartβ€’5mo ago
Yeah, experimentalNoScripts did bad things! - killed client-only - killed nuxt-lazy-load πŸ“ to self
manniL
manniLβ€’5mo ago
Killed everything JS-related 😁
davestewart
davestewartβ€’5mo ago
It's easy to forget when buried in route rules !
Want results from more Discord servers?
Add your server
More Posts
How do you add a directory of files to publicAssets at build time?I'm trying to add a directory of files (wasm and tflite models) to my publicAssets directory at builUsing Nuxt3 behind Apache proxy?Hi, has anyone experience on getting Nuxt to work behind an Apache proxy? I've tried anything I ca$fetch catches error, but not able to read bodyHi, I must be missing something. I'm attempting to get a $fetch error and it's JSON body, but it siBaseURL + Uncommon Configuration With Reverse ProxyWe have a Nuxt3 app which we have created which is intended to be deployed to various locations as aShowing A Loading Component In Nuxt SPA While Router Middleware Is ResolvingHi, I have a Nuxt 3 SPA app (`ssr: false`), where I'm trying to show a loading component while my aSlot "default" invoked outside of the render functionWhat's the problem here? ```ts <script setup lang="ts"> import { Dialog, DialogBackdrop, DialDo I need to use "lazy" with `useFetch/useAsyncData` when deploying to vercel?So before I used to have a fully static fronted (nuxt-generate) and a backend API. Now with nuxt3 thHydration mismatch + SSR rendering order + Pinia reacitvityHello! I met a problem with nuxt rendering order and pinia reactivity on server side. 1) Computed pGetting 404 after app.config.ts changeNot sure if anyone else if getting this but I've been making changes to app.config.ts in dev mode anMaintenance modeIs there an existing (maintained) solution?