My page SliceZone sundenly become empty after adding a new slice

Developing with Prismic
1

Hello,

I'm getting this error after i've added a new slice in my page:

image
image2500×918 140 KB

I don't know what to do but this is quite embarrassing because I can't develop my project anymore as I don't see the page :frowning:

Thanks

nuxt: 2.15.18
slicemachine: 0.2.1

3

Hi Laetitia,

Welcome to the Prismic community,

It seems that you have pushed some breaking changes to your custom types; you can roll back to an older version of the code in Git to fix this.

5

Hi @Fares,

I have reverted my changes, restarted slicemachine and re-sync my page to prismic. But still the same issue.

6

I also got no warning inside the slicemachine.
When I go to /api/v2/documents/search?ref=myRef I can see the content.
Here my package.json:

{
  "name": "Naturo",
  "version": "0.0.0",
  "description": "A Boiler Plate to launch a Nuxt.js and Slice Machine project",
  "license": "MIT",
  "main": "slices/index.js",
  "scripts": {
    "dev": "nuxt",
    "nuxt:build": "nuxt build",
    "build": "nuxt generate",
    "start": "nuxt start",
    "generate": "nuxt generate -m",
    "analyze": "nuxt build --analyze",
    "slicemachine": "start-slicemachine --port 9999"
  },
  "dependencies": {
    "@nuxt/image": "0.6.0",
    "@nuxtjs/prismic": "^1.3.2",
    "@sass-collective/strip-unit": "^3.1.2",
    "body-scroll-lock": "^3.1.5",
    "cookies": "^0.8.0",
    "include-media": "^1.4.9",
    "intersection-observer": "^0.12.0",
    "nuxt": "^2.15.8",
    "vue-slicezone": "^0.1.0",
    "vue-social-sharing": "^3.0.7"
  },
  "devDependencies": {
    "@nuxtjs/style-resources": "^1.2.1",
    "@prismicio/slice-simulator-vue": "^0.1.1",
    "core-js": "^3.18.2",
    "nuxt-purgecss": "^1.0.0",
    "nuxt-sm": "^0.0.9",
    "sass": "^1.42.1",
    "sass-loader": "^10.1.0",
    "slice-machine-ui": "^0.2.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/prismicio-community/slice-library-starter-nuxt"
  }
}

I've also tried to update prismic dependancies in my package.json to the last I found

{
  "name": "Naturo",
  "version": "0.0.0",
  "description": "A Boiler Plate to launch a Nuxt.js and Slice Machine project",
  "license": "MIT",
  "main": "slices/index.js",
  "scripts": {
    "dev": "nuxt",
    "nuxt:build": "nuxt build",
    "build": "nuxt generate",
    "start": "nuxt start",
    "generate": "nuxt generate -m",
    "analyze": "nuxt build --analyze",
    "slicemachine": "start-slicemachine --port 9999"
  },
  "dependencies": {
    "@nuxt/image": "0.6.0",
    "@nuxtjs/prismic": "^1.4.0",
    "@sass-collective/strip-unit": "^3.1.2",
    "body-scroll-lock": "^3.1.5",
    "cookies": "^0.8.0",
    "include-media": "^1.4.9",
    "intersection-observer": "^0.12.0",
    "nuxt": "^2.15.8",
    "vue-slicezone": "^0.1.1",
    "vue-social-sharing": "^3.0.7"
  },
  "devDependencies": {
    "@nuxtjs/style-resources": "^1.2.1",
    "@prismicio/slice-simulator-vue": "^0.2.0",
    "core-js": "^3.18.2",
    "nuxt-purgecss": "^1.0.0",
    "nuxt-sm": "^0.1.1",
    "sass": "^1.42.1",
    "sass-loader": "^10.1.0",
    "slice-machine-ui": "^0.2.1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/prismicio-community/slice-library-starter-nuxt"
  }
}

Don't know if I should keep it, but issue still there.

7

I finally found the issue.

The slice-machine package looks for slices in the 'body' key by default. In my case, the api seems to wrap them in the 'slices' key.

I still don't know if it is the api that generates the wrong json key, or the code that should use 'slices' as default, but it was working before my slice-machine update and my creation of a new slice. So probably the API response has changed from before ?

As a solution, the slice-machine code seems to implement support for the body props which is used to override the default value of the json key used.

So I now use :

<slice-zone type="homepage" queryType="single" lang="fr-fr" body="slices"/>

But it's doesn't seems to be mentioned in the documentation, so I guess it's not really futureproof ?

I will continue the development of my component outside the slices while waiting for your feedback.

9

Hi @Phil,

I'm not sure why my answer was selected as the solution :man_shrugging:

I tried to search in the source code where the error could come from to help you as best as I can, but honestly I still don't have much information like :

  • what caused the problem ?
  • how to avoid reproducing it ?
  • if my fix is future-proof and let me continue using slicemachine ? But then why the documentation method doesn't work for me anymore ?
  • or if I should fix the original issue before continuing using slicemachine ?

As mentionned, I would be very precious to get feedbacks from prismic team side. :slightly_smiling_face:
Especially since the issue appeared, I don't dare to create any new slice for fear of making the problem worse, so kinda blocked :confused:

Thanks

10

Hi Laetitia,

The issue here was that newly created Custom Types will default to the Slice Zone's name in the JSON being slices as opposed to the older body. You can edit this directly in the Custom Type JSON if you wish to revert to the name body. It's your preference here.

You're correct though this isn't well documented and we will update the following articles asap:

Let me know if this is clear.

Thanks.

11

Thank you for your quick answer,

Yes that's way much clearer for me, so I suppose I can go ahead on my slices creation :slight_smile:

Thanks !

1 Like