[SliceZone] Could not find a component for Slice type "..."

yacevedo · January 10, 2025, 2:30pm

I’m working with SvelteKit and recently restructured my slices for better organization due to an increasing number of slices. I added new paths for slices and created a new slice using Slice Machine within one of the new paths.

However, when I try to simulate the slice, the simulator shows a blank page, and I get the following warning in the console:

Role: Developer
Hosting provider: localhost

Package.json file:

{
	"name": "...",
	"private": true,
	"version": "0.0.1",
	"type": "module",
	"scripts": {
		"dev": "concurrently \"pnpm:vite:dev\" \"pnpm:slicemachine\" --prefix-colors blue,magenta",
		"vite:dev": "vite dev --port 5199",
		"build": "vite build",
		"preview": "vite preview",
		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
		"format": "prettier --write .",
		"lint": "prettier --check . && eslint .",
		"slicemachine": "start-slicemachine"
	},
	"devDependencies": {
		"@eslint/compat": "^1.2.4",
		"@slicemachine/adapter-sveltekit": "^0.3.61",
		"@sveltejs/adapter-vercel": "^5.5.2",
		"@sveltejs/enhanced-img": "^0.4.4",
		"@sveltejs/kit": "^2.15.2",
		"@sveltejs/vite-plugin-svelte": "^5.0.3",
		"autoprefixer": "^10.4.20",
		"concurrently": "^9.1.2",
		"eslint": "^9.17.0",
		"eslint-config-prettier": "^9.1.0",
		"eslint-plugin-svelte": "^2.46.1",
		"globals": "^15.14.0",
		"prettier": "^3.4.2",
		"prettier-plugin-svelte": "^3.3.2",
		"prettier-plugin-tailwindcss": "^0.6.9",
		"slice-machine-ui": "^2.11.1",
		"svelte": "^5.17.3",
		"svelte-check": "^4.1.3",
		"svelte-simples": "^1.0.3",
		"tailwind-merge": "^2.6.0",
		"tailwind-variants": "^0.3.0",
		"tailwindcss": "^3.4.17",
		"tailwindcss-animate": "^1.0.7",
		"typescript": "^5.7.3",
		"typescript-eslint": "^8.19.1",
		"vite": "^6.0.7"
	},
	"dependencies": {
		"@iconify/svelte": "^4.2.0",
		"@inlang/paraglide-sveltekit": "^0.15.4",
		"@prismicio/client": "^7.14.0",
		"@prismicio/svelte": "^1.3.1",
		"@tailwindcss/container-queries": "^0.1.1",
		"@tailwindcss/forms": "^0.5.10",
		"@tailwindcss/typography": "^0.5.16",
		"@types/three": "^0.172.0",
		"bits-ui": "1.0.0-next.77",
		"clsx": "^2.1.1",
		"gsap": "^3.12.5",
		"lucide": "^0.470.0",
		"lucide-svelte": "^0.470.0",
		"mode-watcher": "^0.5.0",
		"simplex-noise": "^4.0.3",
		"three": "^0.172.0"
	}
}

slicemachine.config.json file:

{
	"repositoryName": "...",
	"adapter": "@slicemachine/adapter-sveltekit",
	"libraries": [
		"./src/lib/slices",
		"./src/lib/slices/MegaMenu",
		"./src/lib/slices/Sections",
		"./src/lib/slices/Features"
	],
	"localSliceSimulatorURL": "http://localhost:5199/slice-simulator"
}

Steps to reproduce

Add a new slice folder and update the slicemachine.config.json file to include the new paths.
Create a new slice using Slice Machine within the newly added path.
Attempt to simulate the slice.
Observe the blank screen and console warning.

Ezekiel · January 10, 2025, 2:54pm

Hello @yacevedo,

Welcome to the community

On the console, it seems the contact_form slice (could not find a component for Slice type contact_form) has a component not being resolved correctly. Since you've made some changes to the structure of your slices, this could be a couple of things:

1. Confirm the Slice Directory Structure

Ensure the new slice (contact_form) is located in one of the folders listed in your slicemachine.config.json libraries array.

For example, if contact_form is in ./src/lib/slices/Features, the structure should look like this:

src/lib/slices/Features/
  ContactForm/
    ContactForm.svelte
    model.json
    index.js

2. Check the `index.js` Export

Each slice folder should have an index.js that exports the slice component. For the contact_form slice, ensure the index.js file in the ContactForm folder looks like this:

import ContactForm from './ContactForm.svelte';
export default ContactForm;

3. Confirm Slice Type in the `model.json`

Verify that the model.json file in the ContactForm folder has the correct type:

{
  "id": "contact_form",
  "type": "contact_form",
  ...
}

The type in model.json must match the type referenced in the Prismic content and used in the Slice Zone (contact_form).

4. Update the Slice Zone Mapping

The SliceZone component in your project must know how to resolve the new slice type. Check where you import and pass slice components to the SliceZone component.

For example, in a Svelte file like Page.svelte:

import { SliceZone } from '@prismicio/svelte';
import * as slices from '../lib/slices';

<SliceZone slices={page.data.slices} resolver={slices} />

If you're dynamically importing slices, ensure the resolver can access the new slice:

import FeaturesContactForm from './slices/Features/ContactForm';
const slices = {
  contact_form: FeaturesContactForm,
  // other slice mappings
};

6. Test the Slice Simulator

Launch the simulator and verify if the slice renders. Navigate to http://localhost:5199/slice-simulator in your browser.

If you still see a blank page, check the browser developer console for errors. The most common issue would be:

A typo in type definitions.
Incorrect imports or paths.

Because of caching, changes aren't always reflected live, so don't forget to rebuild your project between these steps. Let me know how the troubleshooting goes, and if you're still encountering this issue, we'll keep looking at it

yacevedo · January 10, 2025, 5:09pm

Hi @Ezekiel,

Thank you for your detailed response!

Following your suggestions, I was able to resolve another issue I hadn’t noticed before by applying the steps mentioned in point 4. I hadn’t even tried adding the slice to my page since it wasn’t loading in the Slice Simulator.

Regarding my initial issue with Slice Machine and simulating a slice located in a different path, I managed to solve it by importing the components from the new path into the main src/lib/slices/index.ts file as follows:

// Code generated by Slice Machine. DO NOT EDIT.

import CardsGrid from './CardsGrid/index.svelte';
import { components as FeaturesComponents } from './Features';
import Hero from './Hero/index.svelte';
import SectionCtaImageBg from './SectionCtaImageBg/index.svelte';
import SectionHeading from './SectionHeading/index.svelte';
import SectionSeparator from './SectionSeparator/index.svelte';
import SectionTextGrid from './SectionTextGrid/index.svelte';
import SectionTextImage from './SectionTextImage/index.svelte';
import SectionTextList from './SectionTextList/index.svelte';

export const components = {
	...FeaturesComponents,
	cards_grid: CardsGrid,
	hero: Hero,
	section_cta_image_bg: SectionCtaImageBg,
	section_heading: SectionHeading,
	section_separator: SectionSeparator,
	section_text_grid: SectionTextGrid,
	section_text_image: SectionTextImage,
	section_text_list: SectionTextList
};

This raises two questions:

Does the Slice Simulator only read components from src/lib/slices/index.ts**?** My new components are located in src/lib/slices/Features/index.ts.
If the answer is yes, would manually organizing components into modules (as I did) cause any issues with Slice Machine or future updates?

To clarify, all my index.ts files under the slice library paths were generated by Slice Machine, and I’m unsure if this manual adjustment could lead to further issues.

Here is my current slice directory structure for reference:

.
├── CardsGrid
│   ├── index.svelte
│   ├── mocks.json
│   ├── model.json
│   ├── screenshot-backgroundImageNoSubtitle.png
│   ├── screenshot-cardsWithIcons.png
│   ├── screenshot-default.png
│   └── variations
│       ├── BackgroundImageNoSubtitle.svelte
│       ├── CardsWithIcons.svelte
│       └── Default.svelte
├── Features
│   ├── ContactForm
│   │   ├── index.svelte
│   │   ├── mocks.json
│   │   ├── model.json
│   │   └── variations
│   │       └── Default.svelte
│   └── index.ts
├── Hero
│   ├── index.svelte
│   ├── mocks.json
│   ├── model.json
│   ├── screenshot-default.png
│   ├── screenshot-textGrid.png
│   ├── screenshot-threeJsBackground.png
│   └── variations
│       ├── Default.svelte
│       ├── TextGrid.svelte
│       └── ThreeJsBackground.svelte
├── MegaMenu
│   ├── Heading
│   │   ├── index.svelte
│   │   ├── mocks.json
│   │   └── model.json
│   ├── MenuItem
│   │   ├── index.svelte
│   │   ├── mocks.json
│   │   ├── model.json
│   │   └── variations
│   │       ├── Default.svelte
│   │       ├── WithDropdown.svelte
│   │       └── WithSubMenu.svelte
│   ├── SubMenuItem
│   │   ├── index.svelte
│   │   ├── mocks.json
│   │   ├── model.json
│   │   └── variations
│   │       └── Default.svelte
│   └── index.ts
├── SectionCtaImageBg
│   ├── index.svelte
│   ├── mocks.json
│   ├── model.json
│   ├── screenshot-default.png
│   └── variations
│       └── Default.svelte
├── SectionHeading
│   ├── index.svelte
│   ├── mocks.json
│   ├── model.json
│   ├── screenshot-default.png
│   ├── screenshot-heading3Icons.png
│   └── variations
│       ├── Default.svelte
│       └── Heading3Icons.svelte
├── SectionSeparator
│   ├── index.svelte
│   ├── mocks.json
│   ├── model.json
│   ├── screenshot-default.png
│   └── variations
│       └── Default.svelte
├── SectionTextGrid
│   ├── index.svelte
│   ├── mocks.json
│   ├── model.json
│   ├── screenshot-default.png
│   └── variations
│       └── Default.svelte
├── SectionTextImage
│   ├── index.svelte
│   ├── mocks.json
│   ├── model.json
│   ├── screenshot-default.png
│   ├── screenshot-imageLeftText.png
│   ├── screenshot-textLeftImage.png
│   ├── screenshot-titleImage.png
│   └── variations
│       ├── Default.svelte
│       ├── ImageLeftText.svelte
│       ├── TextLeftImage.svelte
│       └── TitleImage.svelte
├── SectionTextList
│   ├── index.svelte
│   ├── mocks.json
│   ├── model.json
│   ├── screenshot-default.png
│   └── variations
│       ├── Default.svelte
│       └── TextLeftList.svelte
└── index.ts

Ezekiel · January 13, 2025, 8:04am

Hi @yacevedo,

You're welcome, I'm happy it helped! To reply to your questions:

Yes, the Slice Simulator relies on the src/lib/slices/index.ts file to map slice types to their corresponding components. When you launch the simulator, it dynamically imports and matches slices using this index.ts. If a slice's component isn't referenced here (directly or indirectly), the simulator cannot resolve it, leading to the blank page and warning you encountered.

Manually organizing components, as you've done, should not cause any issues with Slice Machine or future updates as long as:

your index.ts exports are correct (each subfolder's index.ts file correctly maps slice types to their components)
the main src/lib/slices/index.ts combines all exports from submodules (which you already have set up properly)
the slice types in model.json match the keys in components
the slices are accessible by the Slice Zone resolver

The only risk you might run into is that if Slice Machine regenerates index.ts during an update, it might overwrite your manual changes but it's unlikely if your index.ts files are already structured to accommodate submodules. You can always test that by creating a new test slice and seeing if it breaks anything you've set up, and rolling it back if it does But I think as long as the central src/lib/slices/index.ts file correctly consolidates all exports, your structure should not cause issues with Slice Machine or SvelteKit.

Topic		Replies	Views
Slice Error with basic slice in Nuxt 2 Developing with Prismic nuxtjs	5	358	February 6, 2023
Could not find a component for Slice type “xxxx". Need help debugging please Developing with Prismic slice-machine	5	710	January 23, 2023
Sveltekit project: error with slice-machine + error 500 on draft previews Developing with Prismic slice-machine , svelte	6	217	February 16, 2024
Slice Simulator not working after slice-machine-ui v1.0.3 upgrade Developing with Prismic	4	503	May 31, 2023
Slice zone empty after slicezone upgrade Developing with Prismic nextjs	3	508	March 14, 2022

[SliceZone] Could not find a component for Slice type "..."

1. Confirm the Slice Directory Structure

2. Check the index.js Export

3. Confirm Slice Type in the model.json

4. Update the Slice Zone Mapping

6. Test the Slice Simulator

Related topics

2. Check the `index.js` Export

3. Confirm Slice Type in the `model.json`