Prismic API references a `xyz_type` that could not be matched by the SliceZone. Did you register libraries path correctly?

Hello everybody,

I hope this is the right place to ask this questions…

I’ve followed the Getting Started tutorial on Slicemachine.dev and i have come to this problem:

"xyz_test error
Prismic API references a slice_type that could not be matched by the SliceZone.
Did you register libraries path correctly?

If you did, make sure this slice_type can be matched with one of your components."

When I run prismic sm --list in the console it lists the slice correctly so I am not sure what is wrong.

Any help would be appreciated.

Hi @ilie, I’ve seen this before as well. The way I managed to fix it was by stopping my local deployment and starting it back up again: npm run dev

After that, it recognized the new slice and everything worked as expected.

Hi @levi ,

Thanks for the quick answer. I’ve done that several times in the process but could not get it to work :-/

Any other thoughts of ideas of where I could look to investigate?

Thanks,
Ilie

Hmmm, I’m not sure.

@Phil, do you have any ideas?

Was the Slice successfully created in the Custom Type in your Prismic repo?

I am not sure how to answer this question because it’s not 100% clear how this is supposed to work:

  • ‘no’ the slice is not visible in the list of content types (here https://xyz.prismic.io/masks/)
  • ‘yes’ the slices in the slice selector within the content type that I chose during the creation of the slices in the CLI

Hey @ilie,

Did you create your slice with the --create-slice command? If yes could you share with us the name of your Slice ? Basically the name of the js file created, the folder and the model.json created ?

Thanks

Hi @renaud,
I’m currently working on a website using Slice Machine with NuxtJS. In dev mode (npm run dev) everything works as expected. As soon as I run «npm run build & export», the following error is showing up in production mode: (only for essential slice, my custom slices work just fine)

Prismic API references a slice_type that could not be matched by the SliceZone.

I hope y’all can help me :slight_smile: thanks

  • David

Edit 1: With adjusting instructions on naming to follow new advice below

I’m in the same boat, without this being resolved Slices are basically useless.

I created my project following your slicemachine.dev nuxt tutorials and the site is working fine.

I followed this workflow:

Open Prismic Web Interface

  1. Open Prismic.io and for my content type (‘post’), and clicked Add Slice.

prismic_io_-

  1. Named my new Slice ‘Share Print’ (2 words with a space)

How much does it matter what I name the slice here?
The prismic-cli asks for 2 words, Pascal Case.
Do I need to match that naming convention here… the other default slices here have spaces in their names?

Edit 1: Make this a space and it will correctly create the JSON with snake_case.

  1. Then add custom fields to the slice by dragging things in with the UI tools

This slice has no custom fields, but I expect Id add them in this step.

  1. Now my slice json is up-to-date as per the JSON editor.

prismic_io_-_braveenergysystems

Open Terminal

  1. Run command to create slice code

    $ npx prismic-cli sm --create-slice # I named the slice ‘SharePrint’

Which created these files in my code:

README_md

index.vue

<template>
  <section class="section">
    <prismic-rich-text v-if="slice.primary.title" :field="slice.primary.title" />
    <h1 v-else>SharePrint</h1>
    <p>
      Hey I'm your new slice 🍕I've been generated by SliceMachine.
      <br/>
      Feel free to make me yours by updating my code ✌️
    </p>
    <p v-if="endpoint">
      Or pass me props <a target="_blank" :href="endpoint">in your writing room</a>
    </p>
  </section>
</template>
<script>
export default {
  props: ['slice'],
  computed: {
    endpoint() {
      return this.$prismic && this.$prismic.apiEndpoint
        ? this.$prismic.apiEndpoint.split('/').slice(0, -2).join('/').replace('cdn.', '')
        : null
    }
  }
}
</script>
<style scoped>
.section {
  position: relative;
  background: #FFFF63;
  color: #111;
  padding: 4em;
  text-align: center;
}
a {
  color: #111;
}
</style>

model.json

{
	"type": "Slice",
	"fieldset": "Share Print",
	"description": "Template model for Share Print",
	"icon": "thumb_up",
	"display": "list",
	"non-repeat": {
		"title": {
			"type": "StructuredText",
			"config": {
				"single": "heading1",
				"label": "Title",
				"placeholder": "This is where it all begins..."
			}
		}
	}
}

In my Code

  1. Replace modal.json with the shareprint json from the json editor (See Step 4)

modal.json (with shareprint json copied in from json editor)

{
  "type": "Slice",
  "fieldset": "Share Print",
  "description": "Share and Print",
  "icon": "local_printshop",
  "display": "list",
  "non-repeat": {},
  "repeat": {}
}
  1. Replace custom types code (/custom_types/post.json) with select all, copy all code from the JSON editor (that now includes reference to my slice).

After all that I’m getting the same error as everyone else.

QUESTIONS

  1. What’s going wrong?
  2. Is this suggested workflow?
  3. If so please add this to your documentation as it’s taken me ages to work out in what order I do prismic UI tasks and terminal tasks. Most of your guides dont cover both sides in one guide.

Ok here’s a clue, I just got this feedback on a related question from @samlittlefair.

It seems the correct way to connect things is like this.

In the prismic UI, name your slice with two words separated by a space aka “Share Print”
This will then automatically create the json code with snake case aka “share_print”
In your code name your Slice with PascalCase aka “SharePrint”.
And everything should wire up.

I just updated my naming conventions for everything based on this and sadly it hasn’t fixed the issue for me.

@samlittlefair could you shed some light?

@samlittlefair maybe you could help us out?

Hey @online,

On line 604 of your screenshot of the JSON editor, it looks like the key for your slice is lowercased, “shareprint,” instead of snake_cased, “share_print.” You could try changing it to snake_casing and see if that helps. Let me know if that helps!

@nativv, are you still having issues? If so, could you show me your nuxt.config.js?

1 Like

Ok I got it working.

Following this naming convention & workflow fixed things for me.

  1. Create a new slice inside your content type, name it 2 words with a SPACE eg. “Share Print”

This will automatically create the json code to be named in snake_case eg share_print

  1. Create a new document that uses your content type and the new slice eg /test-share
  2. From terminal run $ prismic sm --create-slice and name it with PascalCase eg SharePrint
  3. Done.
  4. Running your code locally, navigate to your test page path and the component should show in yellow with no error messages within it.

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