Type error: Cannot find module 'sanity' or its corresponding type declarations.

[Noma98]

Hi,

I was going to distribute a project(using nextjs, typescripts, sanity) to vercel.
However, when I look at package.json on sanity-project, I get the following error, even though all the sanity-related libraries are installed.

I went to the error file and found that all import syntax had red lines, so I modified it to tsconfig.json in the typescript section of sanity's official website and the red line disappeared.

https://www.sanity.io/docs/using-typescript-in-sanity-studio

However, if I still deploy it to vercel, I get the same error.

What's the problem?

To Reproduce

• my project structure

*sanity-project>package.json

{
  "name": "sanity-project",
  "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/icons": "^2.11.0",
    "@sanity/types": "^3.45.0",
    "@sanity/ui": "^2.0.0",
    "@sanity/vision": "^3.43.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sanity": "^3.43.0",
    "styled-components": "^6.1.8"
  },
  "devDependencies": {
    "@sanity/eslint-config-studio": "^4.0.0",
    "@types/react": "^18.0.25",
    "eslint": "^8.6.0",
    "prettier": "^3.0.2",
    "typescript": "^5.1.6"
  },
  "prettier": {
    "semi": false,
    "printWidth": 100,
    "bracketSpacing": false,
    "singleQuote": true
  }
}

*sanity-project>tsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

*root project>tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "types": ["@testing-library/jest-dom"],
    "paths": {
      "@/*": ["./src/*"]
    },
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "types.d.ts",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules", "sanity-studio"]
}

*Where the problem occurs

//sanity-project/plugins/sanity-plugin-tutorial/CustomDefaultLayout.tsx
import React from 'react'
import {LayoutProps, useCurrentUser} from 'sanity'
import {GetStartedTutorial} from './GetStartedTutorial'

export function CustomDefaultLayout(props: LayoutProps) {
  const user = useCurrentUser()

  const showTutorial = Boolean(user?.roles?.length)

  return (
    <>
      {showTutorial && <GetStartedTutorial />}
      {props.renderDefault(props)}
    </>
  )
}

Expected behavior
Deploy successfully

Screenshots

Which versions of Sanity are you using?

Run sanity versions in the terminal and copy-paste the result here.

-> I installed it because it said "zsh: command not found: sanity"
@sanity/cli (global) 3.45.0 (up to date)
@sanity/eslint-config-studio 4.0.0 (up to date)
@sanity/icons 2.11.8 (latest: 3.2.0)
@sanity/types 3.45.0 (up to date)
@sanity/ui 2.1.11 (latest: 2.3.1)
@sanity/vision 3.43.0 (latest: 3.45.0)
sanity 3.45.0 (up to date)

What operating system are you using?
Mac os

Which versions of Node.js / npm are you running?
10.1.0
v20.9.0

[binoy14]

Hi @Noma98 are you running the build command from the root of the project or inside the folder. In vercel you have to configure a root directory so it builds the sanity-project folder as the root. You can join our community slack for help with this issue.

[Noma98]

I'm sorry, it was my mistake. 😅
The problem was that the "exclude" in the rootProject>package.json was incorrectly designated as "sanity-studio", not "sanity-project".

[binoy14]

Great, glad you figured it out!