Slice Simulator Not Rendering the slice

[r0hitm]

Versions

• slice-machine-ui: v2.4.1
• node: v20.14.0

Reproduction

Not sure, if this will reproduce this but I have set up my project using the prismic docs in Nextjs with app router. I configured the route resolver like this:

const routes: prismic.ClientConfig["routes"] = [
  { type: "page", path: "/the-abstract", uid: "the-abstract" },
  { type: "page", path: "/get-involved", uid: "get-involved" },
  { type: "page", path: "/media", uid: "media" },
  { type: "page", path: "/our-team", uid: "our-team" },
  { type: "page", path: "/privacy", uid: "privacy" },
  { type: "page", path: "/project-vision", uid: "project-vision" },
  { type: "page", path: "/terms-and-conditions", uid: "terms-and-conditions" },
  { type: "page", path: "/create", uid: "create" },
  { type: "page", path: "/confirm", uid: "confirm" },
  { type: "blog", path: "/blog/:uid" },
];

And I've ./src/app/[uid]/page.tsx that renders all of the routes above. I've created a page type and populated on prismic. It was giving me the same error that slice machine cannot render my slices, so I tried with the default RichTextSlice that it generates, and that's still not resolved. I've read and double checked the troubleshooting that it points to here at least 3 times already.

Additional Details

{
  "name": "project name",
  "version": "0.1.1",
  "private": true,
  "scripts": {
    "dev": "concurrently \"npm:next:dev\" \"npm:slicemachine\" --names \"next,slicemachine\" --prefix-colors blue,magenta",
    "next:dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "slicemachine": "start-slicemachine",
    "format": "prettier --write .",
    "postbuild": "next-sitemap"
  },
  "dependencies": {
    "@prismicio/client": "^7.8.0",
    "@prismicio/next": "^1.6.0",
    "@prismicio/react": "^2.8.0",
    "es-toolkit": "^1.13.1",
    "gsap": "^3.12.5",
    "next": "14.2.5",
    "next-sitemap": "^4.2.3",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@slicemachine/adapter-next": "^0.3.45",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.4.19",
    "concurrently": "^8.2.2",
    "eslint": "^8",
    "eslint-config-next": "14.2.5",
    "eslint-config-prettier": "^9.1.0",
    "postcss": "^8",
    "prettier": "^3.3.3",
    "prettier-plugin-tailwindcss": "^0.6.5",
    "sass": "^1.77.8",
    "slice-machine-ui": "^2.4.1",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

src
├── app
│   ├── (cms)
│   ├── [uid]
│   ├── api
│   ├── blog
│   ├── byron
│   ├── confirm
│   ├── create
│   ├── error.tsx
│   ├── favicon.ico
│   ├── layout.tsx
│   ├── loading.tsx
│   ├── not-found.tsx
│   ├── page.tsx
│   └── tag
├── components
├── prismicio.ts
├── slice-simulator
├── slices
└── styles

Steps to reproduce

Go to any slice and click simulate button.
(PS dev server is running; every config file is defined correctly)

What is expected?

slice-machine should load and successfully render the slice.

What is actually happening?

slice-machine is loading but not rendering the slice.

P.S. Does the placeholder text not appears on the slice-machine from a freshly created slice?

[comeprismic]

hey,

Thanks for submitting the issue.
I have a few questions to help us investigate further:

• are you using an auth middleware on all your routes?
• what do you see in the console?
• what do you see in your terminal

[r0hitm]

Hey,

• no, I'm not using any middlewares

• In browser's console? I just checked and this is what I get on http://localhost:9999/slices/.--src--slices/WhitePaper/default/simulator url
  

• no errors, only 200 responses from both dev servers

[lihbr]

Hey @r0hitm,

It looks like your Next.js application is rendering a "Not Found" page when trying to reach the Slice Simulator page on your website. Can you make sure the simulator page is available on your website? I think you'll need to rearrange your app directory like so:

  src
  ├── app
  │   ├── (cms)
  │   ├── [uid]
+ |   ├── slice-simulator
+ │   │   └── page.tsx // With the content of the existing `slice-simulator.tsx` file you might have
  │   ├── API
  │   ...
  │   ├── error.tsx
  │   ├── layout.tsx
  │   ├── loading.tsx
  │   ├── not-found.tsx
  │   ├── page.tsx
  │   └── tag
  ├── components
  ├── prismicio.ts
- ├── slice-simulator
  ├── slices
  └── styles

Here's an example of how the Slice Simulator page is setup with the app directory on Next.js if you have any doubt: https://github.com/prismicio-community/nextjs-starter-prismic-minimal/blob/main/src/app/slice-simulator/page.tsx

---

Also, if you'd like to, you should be able to simplify your route resolver using this syntax:

const routes: prismic.ClientConfig["routes"] = [
  { type: "page", path: "/:uid" },
  { type: "blog", path: "/blog/:uid" },
];

This maps the UIDs to their /:uid equivalents instead of declaring them all manually.

---

Let us know if that helps!

[r0hitm]

That worked! Thank you @lihbr!

The troubleshooting docs at slice-machine#simulate-slices should be updated to add this information

---

yeah, I was experimenting with the routes before, I will simplify them