Vitest - Cannot find package '@monicon/runtime'

[timmaier]

I highlighted this issue in https://github.com/oktaysenkan/monicon/issues/54 but since that's now been closed I retested with monicon v1.1.1

When running the vitest vue-monicon-test I get the above error:

Environment: npm: v10.7.0 node: v20.15.1

Here is the test project: https://github.com/timmaier/vue-monicon-test

To replicate clone project and run:

npm install
npm run test:unit

[oktaysenkan]

I don't know why vitest doesn't run resolveId function

Solution

main.ts

import { createApp } from "vue";
import Monicon from "@monicon/vue";

import App from "./App.vue";

import "./style.css";

const app = createApp(App);

app.use(Monicon);

app.mount("#app");

App.vue

<script setup lang="ts"></script>

<template>
  <Monicon name="mdi:home" />
  <monicon name="mdi:home" />
</template>

[timmaier]

Yeah it's very odd only in the vitest do I actually encounter the issue. All works fine in dev and in production, just our CI runs a few vitests which I've disabled for now.

[itsjavi]

I've tried Monicon with React Router v7.2.x and Vite and I got the same error.

[JakeSiewJK64]

@oktaysenkan hello, im having the exact same error when running vitest, except im on vite react.

my package versions dependency:

"@monicon/react": "^1.2.2",
"@monicon/vite": "^1.2.2",

dev dependency

"vite": "^6.0.5",
"vitest": "^3.0.5"

unit test

import Monicon from "@monicon/react";
import { describe, it } from "vitest";
import { render } from "@testing-library/react";

describe("icon", () => {
  it("icon", () => {
    render(<Monicon name="lucide:edit" />);
  });
});