Prismic Slice Machine与官方Next.js启动模板兼容问题求助

问题现象 #

打开localhost:9999（Slice Machine面板）时触发两个关键错误：

hook.js:608 Error: react-modal: No elements were found for selector #__next.
re-fetch a fresh copy SyntaxError: Unexpected token 'L', "Loading{"p"... is not valid JSON
本质为pageProps为空，尝试官方Prismic Next.js模板、降级Node.js到v18.20.2后问题仍存在。

核心原因 #

当前使用的Next.js 15 + React 19属于前沿版本，而Slice Machine v2.15.2及配套的@slicemachine/adapter-next v0.3.75暂未完成对该版本组合的适配，导致DOM节点查找失败、数据解析逻辑异常。

解决方案 #

1. 降级框架到稳定兼容版本 #

修改项目package.json中的依赖版本，替换为Slice Machine已验证的稳定组合：

{
  "name": "nextjs-starter-prismic-multi-page",
  "version": "0.0.0",
  "private": true,
  "license": "Apache-2.0",
  "author": "Prismic <contact@prismic.io> (https://prismic.io)",
  "scripts": {
    "dev": "concurrently \"npm:next:dev\" \"npm:slicemachine\" --names \"next,slicemachine\" --prefix-colors blue,magenta",
    "next:dev": "next",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "slicemachine": "start-slicemachine",
    "format": "prettier --write ."
  },
  "dependencies": {
    "@prismicio/client": "^7.17.2",
    "@prismicio/next": "^2.0.1",
    "@prismicio/react": "^3.2.1",
    "clsx": "^2.1.1",
    "next": "^14.2.15",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@slicemachine/adapter-next": "^0.3.75",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/postcss": "^4.0.1",
    "@types/node": "^20.17.6",
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "concurrently": "^9.1.2",
    "eslint": "^8.57.0",
    "eslint-config-next": "^14.2.15",
    "postcss": "^8.5.1",
    "prettier": "^3.4.2",
    "prettier-plugin-tailwindcss": "^0.6.11",
    "slice-machine-ui": "^2.15.2",
    "tailwindcss": "^4.0.1",
    "typescript": "^5.7.3"
  }
}

执行以下命令重置依赖：

rm -rf node_modules package-lock.json
npm install

2. 调整启动顺序（可选） #

避免同时启动可能导致的服务初始化冲突：

• 先单独启动Next.js服务：npm run next:dev，等待终端显示ready - started server on 0.0.0.0:3000
• 再开新终端启动Slice Machine：npm run slicemachine

3. 验证Slice Machine配置 #

检查项目根目录slice-machine.config.json，确保配置正确：

{
  "repositoryName": "你的Prismic仓库名称",
  "adapter": "@slicemachine/adapter-next",
  "libraries": ["./slices"]
}

内容的提问来源于stack exchange，提问作者Rom-888