Failed to load url resolved bug

[mahmutoz]

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?

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();
  });
});

ConvertFromDomainToCountryCode.ts file

import { COUNTRY_INFO } from "@/constant";  //Error this line

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";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx()
  ],
  resolve: {
    alias: {
      "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
      "@": 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

[mahmutoz]

I solved this error. I added this code in vitest.confic.ts file.

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

[vivi90]

Great, thank you! :)

An more automatic approach to avoid configuration inconsistency (different paths in tsconfig.json than alias in vitest.config.ts) would be to use the vite-tsconfig-paths package in your vitest.config.ts:

import tsconfigPaths from 'vite-tsconfig-paths';
import {
  configDefaults,
  defineConfig,
  mergeConfig,
  type UserConfig,
} from 'vitest/config';
import viteConfig from './vite.config';
...

const config = mergeConfig(
  viteConfig, // Extending from an existing Vite configuration (`vite.config.ts` file)
  defineConfig({
    test: {
      ...configDefaults, // Extending Vitest's default options
      ...
    },
    plugins: [tsconfigPaths(), ...],
    ...
  }) as UserConfig
);

export default config;

[Jason-Terry]

Can you provide a more complete example?

[andreluiz901]

I am creating an application for study only here, and if i use the tsconfigPath, give me the ERR_PACKAGE_PATH_NOT_EXPORTED', and says that its not exported.

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /home/andre/Desktop/work_space/PROJETOS/rocketseat/nest-clean/node_modules/.pnpm/[email protected][email protected]/node_modules/tsconfck/package.json

i was having sme issue, and now i only use the resolve + alias as suggested and works. I dont know if its a config error here, or if its comething with tsconfgPaths, probably related to @ alias at the code.

I am not well know abou tsconfigPaths. but, if u hve any sugggestion to undertand more, i ll appreciate.

best regards,

[ldalves]

I am getting the same error. Without adding the tsconfigPaths() it works fine, adding the plugin the I get Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports"...

[EgorKlimenchuk]

@mahmutoz Hi)
I have a problem with absolute imports in vitest

`///

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/tests/index.ts",
  },
  base: "./",
});

*.test.ts
import { renderHook, act } from "@testing-library/react-hooks";
import { getMembersQuery } from "../queries/get-members.query";
import { useCreateMemberDrawer } from "../ui/create-member-drawer/hooks/use-create-member-drawer";
import { useQueryClient } from "@tanstack/react-query";
import { useCreateUser } from "features/user/queries/useCreateUser";
import { toast } from "react-toastify";

Error: Failed to load url api/clientAPI (resolved id: api/clientAPI) in /Users/yegor2/Desktop/frontend/src/features/common/abstractService.ts. Does the file exist?

[sheremet-va]

"api/clientAPI" is not an absolute url. It's relative to the file it is defined in

If you rely on baseUrl from tsconfig, I recommend using "vite-tsconfig-paths" plugib

[jamilloreto]

nextjs and vitest Failed to load url @/

vitest.config.ts

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import { resolve } from "node:path";

export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    globals: true,
  },
  resolve: {
    alias: [{ find: "@", replacement: resolve(__dirname, "./src") }],
  },
});

[unikitty37]

I still cannot get this to work with SvelteKit, which generates the aliases in .svelte-kit.tsconfig.json and adds "extends": "./.svelte-kit/tsconfig.json" to the root tsconfig.json.

This is my svelte.config.js:

import adapter from '@sveltejs/adapter-auto'
import preprocess from 'svelte-preprocess'
import { fileURLToPath } from 'url'
import { dirname } from 'path'

const projectRoot = dirname(fileURLToPath(import.meta.url))
/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
  // for more information about preprocessors
  preprocess: preprocess({
    scss: {
      prependData: `@import "${projectRoot}/src/lib/css/sass-mixins.scss";`
    },
  }),

  kit: {
    adapter: adapter(),
    alias: {
      $components: 'src/lib/components',
      $stores: 'src/lib/stores',
      $types: 'src/lib/types',
      $tests: 'tests',
    },
  },

  vitePlugin: {
    inspector: true,
  },
}

export default config

and I can see that the aliases are in .svelte-kit/tsconfig.json. They work fine in Vite, but Vitest continues to ignore them, even with this vite.config.ts:

import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vitest/config'

export default defineConfig({
  server: {
    host: process.env.VITEST ? 'localhost' : '0.0.0.0', // FIXME: this should also be 'localhost' in production
    // `npm run dev` should ALWAYS be on port 5173. Tests should NEVER be on this port.
    port: process.env.VITEST ? 5174 : 5173,
    strictPort: !process.env.VITEST,
  },
  plugins: [
    sveltekit(),
  ],
  test: {
    globals: true,
    restoreMocks: true,
    include: ['tests/unit/**/*.test.{js,ts}'],
    environment: 'jsdom',
    setupFiles: [
      './vitest.globals.ts',
    ]
  },
})

and this vitest.config.ts:

import { defineConfig } from 'vitest/config'
import { mergeConfig } from 'vite'
import viteConfig from './vite.config'
import tsconfigPaths from 'vite-tsconfig-paths'

export default mergeConfig(
  viteConfig,
  defineConfig({
    plugins: [
      tsconfigPaths(),
    ],
  })
)

What am I doing wrong here? I just want to have the test files, and their ancillaries (like test harnesses and mock stores) in a separate folder from the actual components.

It would be so much easier if Vitest could just read the aliases from the Typescript config automatically :)

[sheremet-va]

Vitest cannot do this automatically because it would create different behavior between Vite project and the dame project running in Vitest.

[unikitty37]

It has different behaviour now — the SvelteKit app sees the aliases when running under npm run dev, but not when running under Vitest. I guess it's different for other frameworks?

It would really help if the docs had setup instructions for this, though — all the examples I find seem to be for people using React or Vue…

[sheremet-va]

Vitest should work the same way without any additional plugins. I don't know how SvelteKit processes it, so I cannot give any advice.