Your SliceZone is empty, but it isn't

Developing with Prismic
1

Hello team,

I just finished a Prismic + Nuxt.js based project but currently, we have found a problem:
If you are browsing the website, after a while some pages will display "Your SliceZone is empty". Even if they were working a few clicks earlier! At this point we need to reload the page to see the content.

I thought this kind of message only appeared in development mode as wee don't really want the customer to see it, but that is secondary, the main issue remains to be the content that does not appear.

I am using Nuxt.js + slice machine. The deployment is done on the netlify.
Build command: npm run generate
Publish directory: dist/

2

Hey @allan_leonard, thanks for reaching out.
Could you tell us which version of slicemachine is installed on your project? or send us a screenshot of your package.json.

Also, if you can share the URL of your site with us and the steps to follow to find the error, that would help us understand the problem better.

4

Hello Paulina,

Yes sure, here is my package.json:

{
  "name": "Alphacap",
  "version": "1.0.01",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "prismic-sync": "node scripts/prismic-request.js",
    "slicemachine": "start-slicemachine --port 9999",
    "storybook": "nuxt storybook",
    "build-storybook": "nuxt storybook build"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.12.5",
    "@nuxtjs/gtm": "^2.4.0",
    "@nuxtjs/prismic": "^1.2.4",
    "@nuxtjs/robots": "^2.5.0",
    "@nuxtjs/sitemap": "^2.4.0",
    "@prismicio/vue": "^2.0.7",
    "body-scroll-lock": "^3.1.5",
    "chart.js": "^2.9.4",
    "core-js": "^3.8.3",
    "hooper": "^0.3.4",
    "include-media": "^1.4.9",
    "intersection-observer": "^0.12.0",
    "node-sass": "^5.0.0",
    "nuxt": "^2.14.12",
    "nuxt-polyfill": "^1.0.3",
    "nuxt-sm": "^0.0.6",
    "portal-vue": "^2.1.7",
    "prismic-javascript": "^3.0.2",
    "smoothscroll-polyfill": "^0.4.4",
    "vue-chartjs": "^3.5.1",
    "vue-essential-slices": "^0.2.0",
    "vue-lazy-hydration": "^2.0.0-beta.4",
    "vue-slicezone": "^0.0.29",
    "vue-social-sharing": "^3.0.7"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^5.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/storybook": "^3.3.1",
    "@nuxtjs/style-resources": "^1.0.0",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "eslint": "^7.18.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vue": "^7.5.0",
    "fs-extra": "^9.1.0",
    "sass": "^1.29.0",
    "sass-loader": "^10.1.1",
    "slice-machine-ui": "^0.0.45"
  }
}

Here is the website: Alphacap - Homepage

Here the most reproductible way to see this issue:

We have 2 type of repeatable pages : "Vos besoins" and "Nos solutions".
Just open the first sublink inside "Vos besoins" menu's dropdown, then open the first sublink inside "Nos solutions". Now open any of the "Vos besoins"'s sublink, only the one you already openned will work, all other will now shows "Your SliceZone is empty"

I hope this is clear enough :blush:

5

Hi Allan,

I think this might be related to some Slice Machine updates that just happened.

Can you try updating you Next-SliceZone package?

This should resolve you issue.

Thanks.

6

Hello Phil,

I'm using nuxt, the closest name I found is "vue-slicezone": "^0.0.29".
Do I need to update this one to another version ? Or another package ?

Thanks.

7

Ah my bad, easy to get those 2 muddled up.

Yes, you'll need to upgrade vue-slicezone to the latest. Which right now is 0.1.0:

8

Thanks a lot !
It's now working like a charm on our staging env.

Have a good day,

Allan

1 Like
9

Awesome, I'll update the docs for everyone soon for this.

10

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.