Slice Simulator Not Rendering the slice

r0hitm commented 3 months ago

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

```json { "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" } } ```
```sh 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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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

prismicio / slice-machine