tsconfig path alias not working with `sanity dev`

[surjithctly]

Describe the bug

When using Path Alias in a Next.js project for sanity.cli.ts and sanity.config.ts using @/ it throws the following error. While all other next.js files uses this method, it would be great if Sanity supports them as well.

[plugin:vite:import-analysis] Failed to resolve import "@/lib/sanity/schemas" from "sanity.config.ts". Does the file exist?
/Users/.../Project/sanity.config.ts:4:28
2  |  import { deskTool } from "sanity/desk";
3  |  import { visionTool } from "@sanity/vision";
4  |  import { schemaTypes } from "@/lib/sanity/schemas";
   |                               ^
5  |  import {
6  |    projectId,
    at formatError (file:///Users/.../node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:43113:46)
    at TransformContext.error (file:///.../node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:43109:19)
    at normalizeUrl (file:///Users/.../node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:41378:33)

To Reproduce

Use import using Path alias configured in tsconfig such as @/

Expected behavior

The path should resolve as normally.

Screenshots If applicable, add screenshots to help explain your problem.

Which versions of Sanity are you using?

@sanity/cli (global)  3.10.0 (latest: 3.10.3)
sanity                3.10.3 (up to date)

What operating system are you using?

Mac / M1 / VSCode

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

8.19.2
v18.12.0

[leonlafa]

Hi @surjithctly, I've recently been in the trenches on a similar task, assisting a client with migrating their existing Sanity project into an NX Monorepo.

For the sake of clarity, let's say our application is in apps/sanity/studio, and we need it to consume the Logo component from our library tucked away in our libs/sanity/ui.

company-monorepo

> apps
 > sanity
  ⌄ studio
     sanity.config.ts
     sanity.cli.ts
     tsconfig.json
> libs
 > sanity
  > ui
   > src 
    > lib
      index.ts

To set up a path alias for libs/sanity/ui, we need to carry out 2 tasks:

1) First off, we need to establish the necessary path for the library in our tsconfig.json. This is crucial because our TypeScript compiler needs to be kept in the loop about our aliases to compile everything correctly.

tsconfig.json:

2) Next, we need to set up the path alias in our Vite config inside sanity.cli.ts

sanity.cli.ts:

I hope this proves helpful 😀

[adam-rocska]

@saiichihashimoto && @leonlafa at least let's use this vite plugin thingy to eliminate double administration...

worked for me at least ¯\(ツ)/¯ but note, that this whole vite toy is not my game.

[DanPete]

I was able to get this to work for future reference.

sanity.cli.ts

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

export default defineCliConfig({
  api: {
    projectId: PROJECT_ID
    dataset: DATASET,
  },

  vite: {
    plugins: [tsconfigPaths()],
  },
})

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,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"],
    },
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"],
}

"@/*": ["./*"], since we have a flat folder structure for the sanity studio. No app or src directory that contains sanity studio files

[osnoser1]

Another workaround using nx:

sanity.cli.ts

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

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