Vercel部署Sanity/Next.js报错：已安装sanity仍提示找不到模块

问题详情 #

本地运行Sanity+Next.js项目正常，但Vercel生产构建时持续报错，具体错误信息：

> build
> next build
info  - Linting and checking validity of types...
Failed to compile.
./sanity/sanity.config.ts:1:28
Type error: Cannot find module 'sanity' or its corresponding type declarations.
> 1 | import {defineConfig} from 'sanity'
    |                            ^
  2 | import {deskTool} from 'sanity/desk'
  3 | import {visionTool} from '@sanity/vision'
  4 | import {schemaTypes} from './schemas'
Error: Command "npm run build" exited with 1

sanity目录package.json配置： #

{
  "name": "nft-drop",
  "private": true,
  "version": "1.0.0",
  "main": "package.json",
  "license": "UNLICENSED",
  "scripts": {
    "dev": "sanity dev",
    "start": "sanity start",
    "build": "sanity build",
    "deploy": "sanity deploy",
    "deploy-graphql": "sanity graphql deploy"
  },
  "keywords": [
    "sanity"
  ],
  "dependencies": {
    "@sanity/vision": "^3.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-is": "^18.2.0",
    "sanity": "^3.0.0",
    "styled-components": "^5.2.0"
  },
  "devDependencies": {
    "@sanity/cli": "^3.2.3",
    "@sanity/eslint-config-studio": "^2.0.1",
    "eslint": "^8.6.0",
    "prettier": "^2.8.3",
    "typescript": "^4.0.0"
  },
  "prettier": {
    "semi": false,
    "printWidth": 100,
    "bracketSpacing": false,
    "singleQuote": true
  }
}

主目录package.json配置： #

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@next/font": "^13.1.2",
    "@sanity/image-url": "^1.0.1",
    "@thirdweb-dev/react": "^3.6.9",
    "@thirdweb-dev/sdk": "^3.6.9",
    "ethers": "^5.7.2",
    "next": "latest",
    "next-sanity": "^4.0.6",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@sanity/cli": "^3.2.3",
    "@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.4",
    "typescript": "4.9.4"
  }
}

解决方案 #

1. 为主项目添加Sanity核心依赖 #

Vercel构建时默认只安装主目录的依赖，不会自动处理子目录的包。直接将sanity和@sanity/vision添加到主项目依赖中：

npm install sanity @sanity/vision

提交更新后的主目录package.json到仓库，重新触发Vercel构建。

2. 修改构建命令，先安装子目录依赖 #

如果不想将Sanity包放到主依赖，可调整主项目的构建脚本，先安装sanity子目录的依赖再执行Next.js构建：
修改主目录package.json的scripts字段：

"scripts": {
  "dev": "next dev",
  "build": "cd sanity && npm install && cd .. && next build",
  "start": "next start"
}

注意：此方式会增加构建时间，因为需要两次安装依赖。

3. 统一依赖版本，避免冲突 #

主项目与sanity子目录的typescript版本不一致（主项目4.9.4，子目录4.0.0），且都安装了@sanity/cli，可能导致类型解析异常。

• 将两个目录的typescript版本统一（比如都升级到4.9.4）
• 删除两个目录的node_modules和package-lock.json
• 本地重新执行npm install后，提交代码重新部署

4. 排除Sanity目录被Next.js编译 #

如果Sanity Studio仅作为本地内容管理工具，不需要被Next.js打包，可在next.config.js中添加排除规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 排除sanity目录的编译
    config.module.rules.push({
      test: /sanity\/.*/,
      loader: 'ignore-loader',
    });
    return config;
  },
};

module.exports = nextConfig;

同时安装ignore-loader依赖：

npm install ignore-loader --save-dev

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