Slice Machine "slice zone is empty" even though content is published

Hi. I'm having a weird issue with Prismic + Slice Machine.
My website is made using Nuxt.
code for the project can be found here:

The issue I'm experiencing are related to the hydration of the page. If you visit the page called "instructions" it will first load with the "slice zone is empty" but after you hard reload, the page loads just fine.

The returned html from the server works fine, but somehow slice machine takes over after page load. How I solve this?

Hi Frederik,

I'm sorry to see you're having this issue. Can you tell if you're deploying your website statically or server side rendered?

I'm deploying Statically using github pages.

I noticed in your nuxt.config.js that you've got a few conflicting instructions in that case:

  mode: 'universal',

  target: 'static',

  ssr: true,

If your deploying statically you should only have:

  target: 'static',

Your pages are appearing with server side rendering tags, this seems like the cause of the issue.

I'm sorry for the late reply.

I just tried to remove those two settings, but the result unfortunately appears to be the same.
The server side rendering tags are still present.

What's strange is that because you generated the html and then loaded the result to github pages, there isn't a slicezone tag in the html on say this page for it to show:

So it must come from here:

But I don't know why github pages is loading this first. Can you try removing the _nuxt file to see if it affects the website?

1 Like

Yeah it must, but I'm having a hard time figuring out what is going wrong. I tried to setup the project up as stock as possible, hoping it would work.

What can I do from here?

Did you try removing the _nuxt file from the dist file that you upload to pages to see if it affects the website?

I just tried that. It kind of works. :thinking:
But that just means that something in my code is causing the issue?

I'm not sure to be honest. I think it's maybe more to do with how Github pages is deploying the website. I would recommend deploying with Netlify because I know at least it works well and it's also super easy.

I'm using the same Nuxt build commands, as you would on netlify.
All it does is build, and push the built pages to master. Then github will serve them just as any site would, so I doubt that's the issue.

I guess I'll have to create the project. Thank it doesn't have that many changes :unamused:

Anyway thanks for the help!

I talked with my colleague and he thinks it might an issue with node environment not being set to production.

I wanted to try it out, but then realised:

  • dev is forced to false with nuxt build , nuxt start and nuxt generate.

I'm using npm run generate to generate the site :sweat_smile:

I just re-created the entire project with a brand new create-nuxt-app and setup of slice machine.
Repo: GitHub - Xayer/Moduverse: Nuxt site for LEGO Module Standard Moduverse

I'm unfortunately still getting the same issue. :frowning:

Oh my. I believe I found the issue.

The navigation links only work with a / at the end of each page link.
I remember switching to the regular nuxt-link component, because the prismic-link didn't appear to work (due to this exact issue).

However the results are exactly the same with nuxt-links.

I will look further into this issue.
I can't be the only person on earth with a jam stack hosted site on github with this issue.

I've reached out to the team to see what help we can get with this because it's a strange one. I'll let you know when I get a repsonse.

Hey Frederik,

I haven't had any response in the issue tracker about this yet. Are you still seeing this issue?

Looks like you figured it out, HTML looks right and I'm not able to reproduce, even when emulating a slow connection. HTML is alright on page source:

I guess you were generating it as an SPA instead of a static website :slight_smile:

Closing for now, feel free to reopen if needed!