Next.js集成Sanity Studio遇TypeError: Cannot read properties of undefined (reading 'call')求助

我现在碰到一个搞不定的问题，报错是 TypeError: Cannot read properties of undefined (reading 'call')，控制台没有调用栈信息，只有错误页面显示这个报错。

错误页面截图：

项目文件详情 #

app/studio/[[...index]]/page.tsx #

'use client'

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

import config from '../../../sanity.config'

export default function StudioPage() {
  //  Supports the same props as `import {Studio} from 'sanity'`, `config` is required
  return <NextStudio config={config} />
}

app/studio/[[...index]]/head.tsx #

export {NextStudioHead} from 'next-sanity/studio/head'

import {NextStudioHead} from 'next-sanity/studio/head'

export default function CustomStudioHead() {
  return (
    <>
      <NextStudioHead favicons={false} />
      <link
        rel="icon"
        type="image/png"
        sizes="32x32"
        href="https://www.sanity.io/static/images/favicons/favicon-32x32.png"
      />
    </>
  )
}

app/studio/[[...index]]/loading.tsx #

'use client'

import config from '../../../sanity.config'
import NextStudioLoading from 'next-sanity/studio/loading'

export default function Loading() {
  return <NextStudioLoading config={config} />
}

next.config.js #

module.exports = {
  reactStrictMode: true,
  experimental:{
    appDir: true
  }
}

sanity.cli.ts #

import {defineCliConfig} from 'sanity/cli'

export default defineCliConfig({
  api: {
    projectId: process.env.NEXT_PROJECT_ID,
    dataset: 'production'
  }
})

sanity.config.ts #

import {defineCliConfig} from 'sanity/cli'

export default defineCliConfig({
  api: {
    projectId: process.env.NEXT_PROJECT_ID,
    dataset: 'production'
  }
})

package.json #

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@portabletext/react": "^2.0.0",
    "@sanity/image-url": "^1.0.1",
    "next": "latest",
    "next-sanity": "^3.1.3",
    "prop-types": "^15.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "@sanity/vision": "^3.0.0",
    "sanity": "^3.0.0",
    "styled-components": "^5.2.0"
  },
  "devDependencies": {
    "@sanity/eslint-config-studio": "^2.0.1",
    "@types/node": "18.11.3",
    "@types/react": "18.0.21",
    "@types/react-dom": "18.0.6",
    "autoprefixer": "^10.4.12",
    "postcss": "^8.4.18",
    "tailwindcss": "^3.2.1",
    "typescript": "4.8.4"
  }
}

问题排查与解决 #

核心问题出在 sanity.config.ts 文件：你错误地使用了CLI工具的配置函数 defineCliConfig，而Sanity Studio的配置需要用 sanity 包提供的 defineConfig。

修改后的 sanity.config.ts 示例：

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

export default defineConfig({
  name: 'default',
  title: '你的项目名称',
  projectId: process.env.NEXT_PROJECT_ID,
  dataset: 'production',
  plugins: [visionTool()],
  schema: {
    // 这里需要补充你的内容类型定义，比如：
    // types: [{ name: 'post', title: '文章', type: 'document', fields: [...] }]
  }
})

额外检查点：

1. 确保 .env 文件中正确配置了 NEXT_PROJECT_ID，且项目启动时能读取到该环境变量
2. app/studio/[[...index]]/head.tsx 存在重复导出，删除第一行 export {NextStudioHead} from 'next-sanity/studio/head' 即可
3. 若修改后仍有问题，可尝试将 next-sanity 和 sanity 升级到同版本系列的最新稳定版，保证依赖兼容

内容的提问来源于stack exchange，提问作者Paweł Stach