I am new to Cypress and I’m testing components developed in Vue.js using Vite. In the vite.config.js file, I have aliases as follows :

import { fileURLToPath, URL } from "url";

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import svgLoader from "vite-svg-loader";

export default defineConfig(({ command, mode }) => {
  // Load env file based on `mode` in the current working directory.
  // Set t@e third parameter to '' to load all env regardless of the `VITE_` prefix.
  const env = loadEnv(mode, process.cwd(), "");
  return {
    build: {
      commonjsOptions: {
        include: ["tailwind.config.js", "node_modules/**"],
      },
    },
    optimizeDeps: {
      include: ["tailwind-config"],
    },
    plugins: [vue(), svgLoader()],
    define: {
      __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
      __APP_VERSION_STATUS__: JSON.stringify(
        process.env.npm_package_config_status,
      ),
      __APP_NAME__: JSON.stringify(process.env.npm_package_name),
      __VUE_I18N_FULL_INSTALL__: true,
      __VUE_I18N_LEGACY_API__: false,
    },
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
        "tailwind-config": fileURLToPath(
          new URL("./tailwind.config.js", import.meta.url),
        ),
        "@style": fileURLToPath(
          new URL("./src/assets/styles/" + env.VITE_THEME, import.meta.url),
        ),
        "@icon": fileURLToPath(
          new URL("./src/assets/icons/" + env.VITE_THEME, import.meta.url),
        ),
        "@pdf": fileURLToPath(
          new URL("./src/pdf/" + env.VITE_THEME, import.meta.url),
        ),
      },
      extensions: [".ts", ".tsx", ".js"],
    },
  };
});

When I try to import a component in my test, a component that uses the @icon for imports, the test fails because Cypress does not recognize the alias. This is my cypress.config.js file:

import { defineConfig } from "cypress";

export default defineConfig({
  component: {
    devServer: {
      framework: "vue",
      bundler: "vite",
    },
  },

  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

How can I fix this problem, so that Cypress can import components that use Vite aliases ?