Error encountered while deploying Sanity with Next.js, resolved by editing the baseURL.

8 replies
Last updated: Apr 26, 2024
Hey there! I'm currently using Sanity with Next.js, and upon running
npx sanity deploy

I'm getting the error below,

Error: [vite]: Rollup failed to resolve import "@/sanity/lib/api" from "/home/kane/code/fivepointfoodie/sanity.config.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
Here is my
tsconfig.json
and
sanity.config
file!
Thank you!
AI Update

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!

Oops, and the
vite.config.js
Looks like
defineConfig
should be
defineCliConfig
.
Hey there! I tried that and I'm still receiving the same error
I recently created the
vite.config.js
and I believe the error has something to do with the
@/sanity/*
imports (Or Tailwind imports), but I don't want to update it to be
../../../
xD
Ah, this should be in your
sanity.cli.config
file I believe!
Here is the
sanity.config.ts
and here is the error
Hmm...
I got it! I edited the baseURL and got it!
Excellent!
Hi I have the same problem.. what did you edit the baseURL to?

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?