Differences between Deploy Previews and Live with Nuxt 3

Support
, , , ,
#1

I built a site with Nuxt 3 hosted on Netlify which in general works like a charm :sparkling_heart:

But recently I get weird errors in the deploy preview.

For example in the deploy preview my footer is doubled, but live it is fine:
https://deploy-preview-86--sabinehugo.netlify.app/

This is a tat bit unnerving because I can’t tell beforehand if it is an error which also will go live.

Has anyone experienced something similar and can point me in a direction in how to solve this.

Thanks in advance!

#3

Hey @stefanfrede,

Yeah, this is a weird one. I have a theory as to why this is happening, but no explanation why this won’t happen on production. There’s a big difference between your deploy preview and the production build though.

I noticed that, the issue on the deploy preview happens only when JavaScript is enabled. As soon as it’s disabled, there is only one footer. This would mean that, Nuxt is adding the second footer automatically using JavaScript on page load. However, what’s weird is, your deploy preview version doesn’t render much content without JavaScript. However, the production version does. The production version behaves like it doesn’t need JavaScript.

While the pages appear visually similar, under-the-hood there seem to be major differences. The PR build for example, seems to request just 1 JS file, but the production one somehow requests more of those before </body>.

#4

@hrishikesh Thank you for looking into it.

Regarding everything deploy I rely on what I get with Nuxt 3 and Netlify and it seems with that combination something is off.

Is that an issue to bring up with the developers from Nuxt 3 or with you at Netlify?

#5

@hrishikesh I don’t know exactly what changed but now the problem also occurs on production.

I reset my changes from today to the last commit which worked but the deploy still has the mentioned problems:
https://app.netlify.com/sites/sabinehugo/deploys/62e28ccf60b26d0008d80a5e

This is the last deploy which worked:
https://app.netlify.com/sites/sabinehugo/deploys/62de8e1486ce2400081050c8

Any hint on how to prevent this is much appreciated because at the moment we are not able to deploy anything.

#6

I created a less complicated test repository:

And the same problems occur:
https://deploy-preview-1--nuxt3-playground-sfr.netlify.app/

#7

Hey @stefanfrede,

Thanks for sharing the reproduction. I’m still not sure how this is something Netlify would be causing - at the same time, cannot explain the weird behaviour. All I can see is, from Netlify’s end, this appears to be a code that the developer and Nuxt is generating and Netlify is simply executing.

To me it appears that, Nuxt is rendering the content on the server and in its “hydration” step, it’s adding the same content for some reason. Does this happen across various Nuxt versions?

#8

Hi @hrishikesh,

I just downgraded Nuxt to RC1 and the same error occurs.

What I don’t get is that the last time it worked I was using RC4 and for some reason it seems now every deploy is “failing”.

#10

@hrishikesh The problem seems to be nuxt related: Hydration issue with Netlify deployments ¡ Issue #6204 ¡ nuxt/framework ¡ GitHub.

For now there is a workaround which fixes this weird behaviour.

#11

Hey there, @stefanfrede :wave:

Thanks so much for coming back and letting us know. This will be beneficial to future explorers who encounter something similar.