CODEWITHSUNDEEP
deploymentvercelsanity
Bob
Bob

Reputation: 31

Sanity Deployment on Vercel Issue: Cannot find module 'sanity' even though package is installed

So i'm trying to deploy sanity/nextjs on vercel. It runs fine locally but for the production build I keep getting the same error.

Here's the main error:

> 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

My 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
  }
}

My main folder 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"
  }
}

Thanks for your help.

I've checked that I have the 'sanity' package installed. I've added the recommended 'vercel.json' file and I also have the @sanity/cli installed. I've checked my local env setup to make sure that was also on vercel.

Maybe i've overinstalled the sanity packages in trying to solve it?

This is my first time using sanity, nextjs, and vercel so I've run out of ideas and haven't found the same issue answered elsewhere yet.

Upvotes: 3

Views: 3456

Answers (5)

Carlos Gregorio
Carlos Gregorio

Reputation: 506

I think the main problem is the folder structure and how you import the dependencies in your ts files.

I found 2 solutions to the problem.

The first one: (and my preferred one)

If you are using the

import {defineCliConfig} from 'sanity/cli'

this will go and search in your main root folder rather than your sanity project root folder. Hence you should change the import path as "../yourSanityRootFolderName/sanity/cli".

Similar case for

import {visionTool} from '@sanity/vision'

this should change to import from "../yourSanityRootFolderName/sanity/vision".

You can check my folder structure on the second option for reference as well.

The second one:

My project folder structure: BEFORE

 ├── node_modules 
 ├── public
 ├── sanity
 │   ├── .sanity
 │   │   ├── runtime
 │   ├── schemas
 │   ├── package.json
 │   ├── sanity.config.ts
 │   ├── *sanity.cli.ts*
 ├── src
 │   ├── components
 │   │   ├── **/*.tsx
 │   ├── context
 │   ├── models
 │   ├── pages
 │   │   ├──_app.tsx
 │   │   ├──index.js
 ├── .env
 ├── .gitignore
 ├── package.json 
 └── package-lock.json

I moved the sanity.cli.ts file outside the sanity folder and inside the next.js app root. My project folder structure: AFTER

 ├── node_modules 
 ├── public
 ├── sanity
 │   ├── .sanity
 │   │   ├── runtime
 │   ├── schemas
 │   ├── package.json
 │   ├── sanity.config.ts
 ├── src
 │   ├── components
 │   │   ├── **/*.tsx
 │   ├── context
 │   ├── models
 │   ├── pages
 │   │   ├──_app.tsx
 │   │   ├──index.js
 ├── .env
 ├── .gitignore
 ├── package.json
 ├── package-lock.json
 └── *sanity.cli.ts*

After moving the file I had to install the sanity.cli and my main package.json updated as bellow to include the sanity ^3.6.0 dependency.

[![package.json change]: https://i.sstatic.net/WP0s1.png

hope this helps. Cheers!

Upvotes: 0

Nikhil Kadam
Nikhil Kadam

Reputation: 1

Updating the import statement from

import {defineConfig} from 'sanity'

to

import {defineConfig} from 'sanity/lib/exports'

worked for me.

Upvotes: -1

Titus Coleman
Titus Coleman

Reputation: 1

The fix is to move your sanity client config file (aka wherever you have your .env variables setup - in my case: sanity.ts) into a lib folder in the root directory. If the file itself is in the root directory, it will not build.

Upvotes: 0

james bond
james bond

Reputation: 21

You can try to add .vercelignore in the root file and add sanity in there to ignore the whole folder

Upvotes: 2

anna-0
anna-0

Reputation: 11

I had this issue as well, and it seems to be related to Sanity v3 which only came out a month ago - I rolled back to sanity v2 and it fixed the deployment issue

Upvotes: 1

Related Questions