Vite/Rollup error resolving "@/sanity/lib/api" import in sanity.config.ts

I see you're hitting a Vite/TypeScript path alias resolution issue with Sanity Studio! This is a common problem when using path aliases like @/ in your sanity.config.ts file. The issue occurs because Sanity Studio uses Vite under the hood, and Vite doesn't automatically respect your tsconfig.json path mappings.

The Solution

You need to configure Vite to understand your TypeScript path aliases. The best way to do this is by adding the vite-tsconfig-paths plugin to your sanity.cli.ts file.

Step 1: Install the plugin

npm install vite-tsconfig-paths --save-dev
# or
pnpm add vite-tsconfig-paths -D
# or
yarn add vite-tsconfig-paths -D

Step 2: Configure your sanity.cli.ts

import { defineCliConfig } from 'sanity/cli'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineCliConfig({
  api: {
    projectId: 'your-project-id',
    dataset: 'your-dataset',
  },
  vite: {
    plugins: [tsconfigPaths()],
  },
})

Step 3: Ensure your tsconfig.json has the correct path mappings

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Note: Adjust the path mapping based on your project structure. If your Sanity files are in a specific directory (like src/), you'd use "@/*": ["./src/*"] instead.

Alternative: Manual Vite Alias Configuration

If you prefer not to use the plugin, you can manually configure Vite aliases in sanity.cli.ts:

import { defineCliConfig } from 'sanity/cli'
import path from 'path'

export default defineCliConfig({
  api: {
    projectId: 'your-project-id',
    dataset: 'your-dataset',
  },
  vite: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './'),
      },
    },
  },
})

For NX Monorepo Users

If you're using NX, there's a specific plugin for that as mentioned in this GitHub comment:

import { defineCliConfig } from 'sanity/cli'
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'

export default defineCliConfig({
  vite: {
    plugins: [nxViteTsPaths()],
  },
})

Why This Happens

According to the GitHub issue discussion, this behavior is actually by design. A Sanity contributor mentioned that they don't support this out-of-the-box because sharing config across your build output can potentially cause issues. However, the workarounds above are safe and widely used in the community.

After making these changes, restart your dev server with npx sanity dev and your path aliases should work correctly!