Slice Simulator "use client" issue

Developing with Prismic
, ,
1

I am building a Next.js app using the new app router + RSC.

I have a button that is a RSC and I am running a db query inside the button (caching it using the unstable_cache) and also pulling cookie details using next/headers. This works fine in normal builds where my pages/layouts beneath are all server components.

The issue arises when I try to use slice simulator and it's set to "use client", I have tried to remove the use client requirement with no success. I am in desperate need of a solution for this as this makes my developer experience a lot more painful as I was planning to use the simulator ALOT.

Let me know if there's a work around for this. In the mean time, I have to rename the slice-simlator page.tsx to ingnore.tsx because it just keeps throwing up errors.

Logs Example:

image
image960×717 28.6 KB

3

Hello Ben,

Welcome to the Prismic community, and thanks for reaching out to us.

Could you please tell me what version of the slice simulator you are using? Can you share the packge.json file?

Thanks,
Priyanka

4

Sure thing!

{
  "name": "odp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 4000",
    "build": "next build",
    "start": "next start",
    "start:local": "next start -p 4000",
    "lint": "next lint",
    "gen": "prisma generate",
    "postinstall": "prisma generate",
    "sm": "start-slicemachine"
  },
  "dependencies": {
    "@googlemaps/google-maps-services-js": "^3.3.37",
    "@next/bundle-analyzer": "^13.4.19",
    "@prisma/client": "^5.2.0",
    "@prismicio/client": "^7.2.0",
    "@prismicio/next": "^1.3.4",
    "@prismicio/react": "^2.7.1",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-dialog": "^1.0.4",
    "@radix-ui/react-navigation-menu": "^1.1.3",
    "@radix-ui/react-popover": "^1.0.6",
    "@radix-ui/react-slot": "^1.0.2",
    "@react-google-maps/api": "^2.19.2",
    "@t3-oss/env-nextjs": "^0.6.1",
    "@tailwindcss/typography": "^0.5.9",
    "@types/node": "20.5.7",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.15",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "eslint": "8.48.0",
    "js-cookie": "^3.0.5",
    "lucide-react": "^0.274.0",
    "next": "13.4.19",
    "postcss": "8.4.29",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "server-only": "^0.0.1",
    "tailwind-merge": "^1.14.0",
    "tailwindcss": "3.3.3",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "5.2.2",
    "zod": "^3.22.2"
  },
  "devDependencies": {
    "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
    "@slicemachine/adapter-next": "^0.3.13",
    "@types/invariant": "^2.2.35",
    "@types/js-cookie": "^3.0.3",
    "@typescript-eslint/parser": "^6.5.0",
    "eslint-config-next": "^13.4.19",
    "eslint-config-prettier": "^9.0.0",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-tailwindcss": "^3.13.0",
    "prettier": "^3.0.3",
    "prisma": "^5.2.0",
    "slice-machine-ui": "^1.11.0"
  }
}

Let me know if there's anything else you need.

I checked the exact node_modules folder too just to be safe and the version for the @slicemachine/adapter-next is "0.3.13"

5

Here's my slice machine config too just to be safe:

{
  "repositoryName": "removed",
  "adapter": "@slicemachine/adapter-next",
  "libraries": ["./slices"],
  "localSliceSimulatorURL": "http://localhost:4000/slice-simulator"
}
6

@ Priyanka, let me know if there's any update for this.

7

Hello Ben,

I apologize for the late response. I haven't found a solution to the issue yet. I'll check with my dedicated team member and will come back to you.

Thanks,
Priyanka

8

Thank you for the reply Priyanka, I imagine you guys have a lot going on with the redesign + next app router changes.

9

Hi Ben,

Thanks for reporting this issue. We do not have a solution for this limitation yet, although we do have some ideas.

As a workaround, you can wrap your calls to server-only imports, such as cookies, with a try...catch statement and a dynamic import.

Here is an example of a getAllCookies() function that prevents the error you are reporting. Note that you cannot read server-based cookies in client-side components, thus it returns an empty array as a fallback.

export async function getCookies() {
  try {
    const { cookies } = await import("next/headers");

    return cookies().getAll();
  } catch {
    return [];
  }
}

getCookies() can be called in a component in place of next/headers's cookies import.

1 Like
10

Hi Angel, this isn't possible as I am using a lot of server-only features and don't want to have to continuously wrap my server methods. Just following up to see if there's been any breakthrough in this area as I'd love to see the live preview/editor work.

image
image826×911 64.4 KB

11

Hi @ben6, unfortunately no, we don't have any progress on this topic yet. I will raise the issue to the team, however, so we can find a proper solution.

12

Hi @ben6.

I'm also having a similar issue. I have removed "use client" from my slice-simulator/page.tsx file and seems like things are working fine now. I wonder what issues you faced when you removed that as you mentioned in the OP? And also, if you found a solution for this ?