DTK0022: View distDir Not Found

Package: @vitejs/devtools

Message

distDir {distDir} does not exist

Cause

The DevToolsViewHost.hostStatic() method was called with a distDir path that does not exist on disk. Before serving static files, the view host checks that the directory is present using existsSync(). This typically happens when the UI package has not been built yet, or when the path is misconfigured.

Example

import { resolve } from 'node:path'

export default defineDevToolsPlugin({
  name: 'my-plugin',
  setup(context) {
    // Throws DTK0022 if the dist directory hasn't been built
    context.views.hostStatic(
      '/.my-plugin/',
      resolve(__dirname, '../client/dist'),
    )
  },
})

Fix

Ensure the dist directory exists before calling hostStatic(). This usually means building the UI package first.

# Build the UI package before starting the dev server
pnpm -C packages/my-plugin-ui run build

If the path might not exist in all environments (e.g., during development without a build), guard the call:

import { existsSync } from 'node:fs'
import { resolve } from 'node:path'

const distDir = resolve(__dirname, '../client/dist')
if (existsSync(distDir)) {
  context.views.hostStatic('/.my-plugin/', distDir)
}

Source

packages/core/src/node/host-views.ts