TypeError when Setting Up Vitest

[brenodanyel]

Environment

---

• Operating System: Linux
• Node Version: v20.17.0
• Nuxt Version: -
• CLI Version: 3.21.1
• Nitro Version: -
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Version

3.0.0-alpha.10

Reproduction

• Start a new project with the starter CLI:
  npx nuxi init -t github:nuxtlabs/nuxt-ui3-vue-starter test-app

• Install vitest and vue test-utils
  bun add -D vitest @vue/test-utils

• Add test script to package.json
  "test": "vitest"

• Run the test script

Description

I'm encountering a TypeError while trying to set up Vitest in my project (Vue). The error message is as follows:

TypeError: Package import specifier "#imports" is not defined in package 
/home/xxxx/test-app/node_modules/@nuxt/ui/package.json imported from 
/home/xxxx/test-app/node_modules/@nuxt/ui/dist/runtime/composables/useComponentIcons.js

Additional context

No response

Logs

TypeError: Package import specifier "#imports" is not defined in package /home/xxxx/test-app/node_modules/@nuxt/ui/package.json imported from /home/xxxx/test-app/node_modules/@nuxt/ui/dist/runtime/composables/useComponentIcons.js

[averrois]

That's weird I tried to do the same but I did not got the same logs, instead the test just passed

[brenodanyel]

Hey @averrois! I forgot to mention that this error only happens when we call mount for a component that internally uses any Nuxt UI component

With the starter, you can call mount on App.vue, since it uses UApp and UButton.

// src/App.spec.ts

import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import App from './App.vue';

describe('App', () => {
	it('should render', () => {
		const wrapper = mount(App);
		expect(wrapper.exists()).toBe(true);
	});
});

Can you please test if it still working for you?

[brenodanyel]

Hey @benjamincanac

Just following up to see if there are any updates on this issue. This is the last blocker preventing me from integrating Nuxt UI into my company's projects. I really appreciate your time and all the work you put into this project!

[benjamincanac]

Honestly I don't know how to fix this yet, I think this is the same issue as #2560. I encountered it myself in the nuxt/ui-pro repository when running Vue tests (which I had to disable for now).

@antfu Maybe you will have some hints?

[brenodanyel]

Honestly I don't know how to fix this yet, I think this is the same issue as #2560. I encountered it myself in the nuxt/ui-pro repository when running Vue tests (which I had to disable for now).

@antfu Maybe you will have some hints?

@antfu Can you please take a look?

[OrbisK]

Looks like the resolveId for #imports is never called when running vitest. It does when running dev.

vite.config.ts/vitest.config.ts

import { defineConfig, Plugin } from "vite"
import vue from "@vitejs/plugin-vue"
import ui from "@nuxt/ui/vite"


// https://vitejs.dev/config/
export default defineConfig({
  test: {
    globals: true,
  },
  optimizeDeps: {
    exclude: ["@nuxt/ui"]
  },
  plugins: [
    {
      enforce: "pre",
      name: "test",
      resolveId: (id)=>{
        console.log(id)
        if(id === '#imports') {
          console.log("resolved")
        }
      }
    } satisfies Plugin,
    vue(),
    ui({
      ui: {
        colors: {
          primary: "green",
          neutral: "slate"
        }
      }
    }),
  ]
})

resolved imports

/@fs/workspaces/nuxt-ui-vue-starter/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/client/env.mjs
/@fs/workspaces/nuxt-ui-vue-starter/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/client/env.mjs
/workspaces/nuxt-ui-vue-starter/src/example.test.js
/workspaces/nuxt-ui-vue-starter/src/example.test.js
./App.vue
@nuxt/ui/vue-plugin
/workspaces/nuxt-ui-vue-starter/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/@nuxt/ui/dist/runtime/components/Button.vue
/workspaces/nuxt-ui-vue-starter/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/@nuxt/ui/dist/runtime/components/App.vue
plugin-vue:export-helper
../composables/useComponentIcons
../composables/useButtonGroup
../composables/useFormField
../utils
../utils/link
./Icon.vue
./Avatar.vue
./Link.vue
./LinkBase.vue
#build/app.config
#build/ui/button
../utils/tv
plugin-vue:export-helper
vue
vue
reka-ui

reproduction: https://github.com/OrbisK/nuxt-ui-vue-starter/tree/test/repoduction

[OrbisK]

Event this fails:

example.test.js

import App from './App.vue';

it("dont care", ()=>{})

[jinevo]

Facing the same issue. I’ve disabled Vitest in the CI. I really hope a fix for this one.

[fm96-dev]

I found a workaround/solution!

From what I understand, Vitest skips transformation for "external" files — by default, all packages under node_modules aren’t transformed. This includes the @nuxt/ui package.

Adding @nuxt/ui to the test.server.deps.inline option solves the issue because it tells Vitest to process files from that package:

// vitest.config.ts 

import { fileURLToPath } from 'node:url'
import { mergeConfig, defineConfig } from 'vitest/config'
import viteConfig from './vite.config'

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      globals: true,
      environment: 'jsdom',
      root: fileURLToPath(new URL('./', import.meta.url)),
      server: {
        deps: {
          inline: ['@nuxt/ui']
        }
      }
    },
  })
)

Maybe this could be added inside the AppConfigPlugin, so users don’t have to set the option manually.
If that sounds good, I can open a pull request 😊

[benjamincanac]

Wow nice found @fm96-dev!
I just tried it out in @nuxt/ui-pro and was able to finally run the tests. Thank you!!