nuxt: Nuxt Generate - Page not showing any content client side, works fine server side.

Versions

nuxt: 2.14.3
node: 10.13.0

Reproduction

This repo: https://github.com/funkhaus/fuxt

Demo is here: https://fuxt-funkhaus.netlify.app

Steps to reproduce

Rename .example.env to .env
Use nuxt generate on above repo and deploy to Netlify (or nuxt start locally)
Load any page on the site (https://fuxt-funkhaus.netlify.app), content loads off server fine.
Browse to any other page via nuxt-link and page new will be empty of any dynamic content.

What is Expected?

Client side browsing should load content from payload onto the page.

What is actually happening?

So it seems server side is working fine. But client side is not. If you look at the network inspector in your browser as you move around the site, you’ll see that payload.js is loading and looks to contain the correct code, but it never makes it onto the page for some reason.

The site only contains a few fetch() methods here: https://github.com/funkhaus/fuxt/blob/master/pages/_page.vue https://github.com/funkhaus/fuxt/blob/master/components/WpMenu.vue https://github.com/funkhaus/fuxt/blob/master/components/WpSeo.vue

And a request in nuxtServerInit here: https://github.com/funkhaus/fuxt/blob/master/store/index.js#L60

It all seems to be inline with the way you recommend the use of fetch(), so I’m not sure what is not working? Perhaps it doesn’t like GQL? Or the use of lodash _get in the fetch()?

I wish there was more explanation of what nuxt generate and payload is doing behind the scenes so I could troubleshoot this myself.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 33 (14 by maintainers)

Most upvoted comments

I ran into this with using asyncData and target: 'static' – you can see this e.g. here:

https://www.virtualsupporttalks.de/impressum/

If you open that page directly, you can see the content is there because it’s correctly rendered server side. But it’s gone after a moment and the page is blank.

Also, I get this warning:

The resource https://www.virtualsupporttalks.de/_nuxt/static/1608037846/impressum/payload.js was preloaded
using link preload but not used within a few seconds from the window's load event. Please make sure it has
an appropriate `as` value and it is preloaded intentionally.

What I found strange when looking into the payload.js file: It starts with __NUXT_JSONP__("/impressum", (function(a, b…

I’ve set the trailingSlash router property in my nuxt.config.js in order to make everything work with Netlify. Which in my wild guesses should result in the payload.js having this output: __NUXT_JSONP__("/impressum/", (function(a, b…. Or whatever handles the payload should be able to handle the trailing slash?

So I tried removing this and… everything works 😅 Could this be the problem? I have to add the trailingSlash option again, of course, because Netlify needs this. Unfortunately, this makes it impossible to link to these pages directly for now 😑

EDIT: Nevermind, this problem is already mentioned here https://github.com/nuxt/nuxt.js/issues/8476 and should be solved here: https://github.com/nuxt/nuxt.js/pull/8489 – how satisfying that I was on the right track, though 😄

HerrBertling on Dec 15, 2020

@adamdehaven @drewbaker Really appreciate your checking on this - you definitely caught a significant regression before release ❤️ - see #8802

danielroe on Feb 9, 2021

We are a bit late on schedule since 2.15 includes a bigger change regarding PostCSS 8 so we need more internal testing before 😄

Atinux on Jan 18, 2021

@drewbaker It should land in 2.15…

danielroe on Dec 17, 2020

So I’m bumping this again to ask if this can be rolled out soon as part of a 2.14.x release, as nuxt is not usable with the generate command without this fix in place and it appears that 2.15 is not being rolled out yet. Possible?

adamdehaven on Feb 2, 2021

I can confirm this resolves the issue for me as well (tested in nuxt-edge 2.15.0-26830131.c15078fa) – much appreciated. Ship it 🚢 👍🏼

adamdehaven on Jan 5, 2021

Thanks @danielroe this is so massive for us. Love this. Thank you for fixing!

Ran into some unrelated build errors over here https://github.com/nuxt/nuxt.js/issues/8508

Can confirm this works innuxt-edge, so happy!

When do you think this will land in a core 2.x release?

drewbaker on Dec 17, 2020

Closed in https://github.com/nuxt/nuxt.js/pull/8466. Would appreciate testing via nuxt-edge to confirm fix.

danielroe on Dec 17, 2020