Next.js 13集成Sanity V3 Studio遇TypeError报错求助

以下是针对性的排查和解决步骤：

1. 修复依赖版本冲突 #

你的package.json中Next.js使用了latest版本（易出现兼容性问题），同时styled-components版本过旧（Sanity V3需要较新的styled-components支持）：

• 修改package.json中的依赖版本：

{
  "dependencies": {
    // 替换为稳定的Next.js 13版本
    "next": "13.4.19",
    // 升级styled-components到兼容Sanity V3的版本
    "styled-components": "^6.1.8",
    // 其他依赖保持不变
    "@portabletext/react": "^2.0.0",
    "@sanity/image-url": "^1.0.1",
    "@sanity/vision": "^3.0.0",
    "next-sanity": "^3.1.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "sanity": "^3.0.0"
  }
}

• 执行命令清理并重新安装依赖：

rm -rf node_modules .next package-lock.json
npm install

2. 确保Studio页面使用客户端渲染 #

在Next.js 13的App Router中，Sanity Studio必须在客户端环境运行，需给Studio页面添加动态渲染配置：
修改app/studio/[[...index]]/page.tsx：

import { NextStudio } from 'next-sanity/studio'
import config from '../../../sanity.config'

// 强制客户端渲染
export const dynamic = 'force-static'

export default function StudioPage() {
  return <NextStudio config={config} />
}

3. 检查Sanity配置文件 #

确保sanity.config.ts（或.js）中配置正确，比如正确导入defineConfig：

import { defineConfig } from 'sanity'
import { deskTool } from 'sanity/desk'
import { visionTool } from '@sanity/vision'

export default defineConfig({
  projectId: '你的projectId',
  dataset: '你的dataset',
  plugins: [deskTool(), visionTool()],
  schema: {
    // 你的schema配置
  }
})

4. 清除Webpack缓存 #

如果上述步骤无效，尝试强制清除Webpack缓存后重启服务：

npm run build -- --clean
npm run dev

内容的提问来源于stack exchange，提问作者VladosNinja