Vitest UI启动报错：Cannot read properties of undefined (reading 'config') 求助

问题背景 #

基于Vue3 Composition API的项目，从Vue CLI+Jest迁移到Vite+Vitest后，基础单元测试运行正常，但安装@vitest/ui并执行vitest --ui时出现如下报错：

TypeError: Cannot read properties of undefined (reading 'config')
at configureServer (file:///work/node_modules/@vitest/ui/dist/index.js:11:29)
at _createServer (file:///work/node_modules/vite/dist/node/chunks/dep-a178814b.js:63375:30)
at async createVitest (file:///work/node_modules/vitest/dist/vendor-cli-api.70680cd5.js:14365:18)
at async startVitest (file:///work/node_modules/vitest/dist/vendor-cli-api.70680cd5.js:20757:15)
at async start (file:///work/node_modules/vitest/dist/cli.js:106:17)

核心原因及对应解决方案 #

1. @vitest/ui与vitest版本不匹配 #

这是触发该报错的最常见原因。@vitest/ui是vitest的官方插件，二者内部API耦合度极高，版本必须严格对齐，否则会出现未定义的属性调用。

• 解决步骤：
  • 查看当前vitest版本：npm list vitest
  • 安装对应版本的@vitest/ui，例如vitest版本为0.34.6时，执行：npm i -D @vitest/ui@0.34.6
  • 或者直接统一升级到最新兼容版本：npm i -D vitest@latest @vitest/ui@latest

2. Vite版本不兼容 #

Vitest依赖特定版本的Vite提供的插件API，旧版Vite可能不支持@vitest/ui所需的配置读取逻辑。

• 解决步骤：
  • 检查当前Vite版本是否符合vitest官方的依赖要求
  • 升级Vite到兼容版本：npm i -D vite@latest

3. Vitest配置文件存在错误 #

如果vitest.config.js（或vite.config.js中的test字段）导出格式错误、缺少必要配置项，会导致UI插件无法正常读取配置对象。

• 解决步骤：
  • 确保配置文件正确导出配置对象，示例如下：

    import { defineConfig } from 'vitest/config'
    import vue from '@vitejs/plugin-vue'
    
    export default defineConfig({
      plugins: [vue()],
      test: {
        // 自定义测试配置
      }
    })
    

  • 暂时注释自定义配置，用默认配置测试能否启动UI，逐步排查问题配置项。

4. 依赖缓存或文件损坏 #

node_modules中的依赖包损坏、缓存文件异常，可能导致模块加载时出现未定义属性的问题。

• 解决步骤：
  • 删除node_modules和package-lock.json（或yarn.lock）
  • 重新安装依赖：npm install
  • 清除Vite缓存：npx vite --clear-cache

内容的提问来源于stack exchange，提问作者blunthlox