Next.js+Sanity项目部署Vercel失败：sanity/cli模块未找到

问题分析 #

构建失败的核心原因是./sanity/sanity.cli.ts中导入路径错误，且Sanity CLI工具被错误归类到生产依赖中，导致构建时无法正确解析模块。

解决方案 #

1. 修正导入路径 #

打开./sanity/sanity.cli.ts，将第一行导入语句修改为：

import {defineCliConfig} from '@sanity/cli'

2. 调整依赖位置 #

Sanity CLI属于开发工具，无需在生产环境加载，将@sanity/cli从dependencies移到devDependencies中，修改后的package.json如下：

{
  "name": "ptfolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^2.0.13",
    "@next/font": "13.0.7",
    "@portabletext/react": "^2.0.0",
    "@sanity/client": "^3.4.1",
    "@sanity/image-url": "^1.0.1",
    "@types/node": "18.11.16",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.9",
    "framer-motion": "^7.10.2",
    "git": "^0.1.5",
    "next": "13.0.7",
    "next-sanity": "^3.1.8",
    "next-sanity-image": "^5.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.41.1",
    "react-simple-typewriter": "^5.0.1",
    "react-social-icons": "^5.15.0",
    "typescript": "4.9.4"
  },
  "devDependencies": {
    "@sanity/cli": "^3.1.2",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.20",
    "tailwind-scrollbar": "^2.0.1",
    "tailwindcss": "^3.2.4"
  }
}

3. 本地验证构建 #

在项目根目录执行以下命令，确保本地能正常构建：

npm install
npm run build

4. 重新部署 #

本地构建成功后，重新推送代码到关联的GitHub仓库，或直接执行vercel build && vercel deploy完成Vercel部署。

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