How can I solve the issue of 'failed to resolve import in '@/...'" vitest?

Question

This is the error I got. There is a problem with the file path I defined in the "vite.config.ts" file. Can you help me?

Error Message:

FAIL  tests/utils/ConvertFromDomainToCountryCode.test.ts [ tests/utils/ConvertFromDomainToCountryCode.test.ts ]
Error: Failed to resolve import "@/constant" from "src/assets/ts/_utils/ConvertFromDomainToCountryCode.ts". Does the file exist?

ConvertFromDomainToCountryCode.test.ts file

import { describe, expect } from "vitest";
import { SetFlags } from "../../src/assets/ts/_utils/ConvertFromDomainToCountryCode.ts";

describe("Convert From Domain To CountryCode", () => {
  test("function defined", () => {
    expect(SetFlags).toBeDefined();
  });
});

Here it works fine when I make the file path "../../../constant/index".

ConvertFromDomainToCountryCode.ts file

import { COUNTRY_INFO } from "@/constant";

Here i added "alias"

vite.config.ts file

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve, dirname } from "node:path";
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [
    vue(),
    vueJsx()
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  },
  base: "/"
});

System

OS: macOS 13.2.1
CPU: (8) arm64 Apple M1 Pro
Memory: 91.50 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.18.1/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
Browsers:
Chrome: 111.0.5563.64
Safari: 16.3
npmPackages:
@vitejs/plugin-vue: ^3.1.2 => 3.2.0
@vitejs/plugin-vue-jsx: ^3.0.0 => 3.0.0
@vitest/coverage-istanbul: ^0.29.3 => 0.29.3
vite: ^3.1.8 => 3.2.5
vitest: ^0.29.3 => 0.29.3

Just waiting for the path of the file to be found

score 8 · Accepted Answer · edited Jun 28 '23 at 05:45

8

I solve this error. I add this code in vitest.config.ts file.

resolve: {
  alias: [{ find: "@", replacement: resolve(__dirname, "./src") }]
}

edited Jun 28 '23 at 05:45

Penny Liu

15,447
5
79
98

answered Mar 21 '23 at 08:57

mahmutoz

131
1
7

Here is the reference [link](https://github.com/vitest-dev/vitest/discussions/3042#discussioncomment-5378497). – Penny Liu Jun 28 '23 at 05:54
can not find ```resolve``` or ```__dirname``` – Amir Rezvani Jun 29 '23 at 16:16
1

@AmirRezvani `import {resolve} from 'node:path'` – Jonathan Dumaine Jul 23 '23 at 09:06
yea, i figure it out later. @jonathan-dumaine – Amir Rezvani Jul 24 '23 at 09:38

score 3 · Answer 2 · answered Jul 12 '23 at 12:03

Had the same problem and the answer helps to solve it but I wanna add you can import resolve from path

import { resolve } from 'path'

and if you haven't declared @ in your tsconfig but you have dynamic path for some specific folders you can just specify them.

resolve: {
  alias: [{ 
    find: "@server", 
    replacement: resolve(__dirname, './src/server/') 
  }]
}

score 0 · Answer 3 · answered Aug 03 '23 at 16:35

I encountered an error when trying to use material icons with the default import provided by Material UI icons (v5) on my code that use material ui 4. The code I used was:

import CheckCircleIcon from '@mui/icons-material/CheckCircle';

The error I received was:

[plugin:vite:import-analysis] Failed to resolve import "@mui/icons-material/CheckCircle" from "src/auth/components/Pricing/PricingTable.tsx". Does the file exist?

Since I am using Material UI version 4, I needed to modify the import to:

import CheckCircleIcon from "@material-ui/icons/CheckCircle";

After making this change, the problem was resolved, and the component worked perfectly.

How can I solve the issue of 'failed to resolve import in '@/...'" vitest?

System

3 Answers3