Search code examples
reactjstypescriptvitevitest

vitest loading absolute path working for some components but not all

This is what my vitest.config.ts , tsconfig.json and vite.config.ts looks like

vitest.config.ts

import { defineConfig } from "vitest/config";
import path from 'path'


export default defineConfig({
    resolve: {
        alias: [
          {find: "@enums", replacement: path.resolve(__dirname, './src/shared/enums') },
          {find: "@components/*", replacement: path.resolve(__dirname, './src/components/*') },
          {find: "@shared/*", replacement: path.resolve(__dirname, './src/shared/*') },
        ]
      },
    test: {
        globals: true,
        environment: 'jsdom',
       
    }
});

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@components/*": ["./src/components/*"],
      "@enums": ["./src/shared/enums.ts"],
      "@shared/*": ["./src/shared/*"],
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'
import tsconfigPaths from 'vite-tsconfig-paths'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],

 
})

the absolute import works for @shared/types, @enums but it fails for @shared/helperFunctionsForTest

picture below for reference,

with absolute import for helperFunctionsForTest enter image description here

with relative import for helperFunctionsForTest enter image description here

Additional information: I created the types.ts a while ago, and now no matter what file I make, [vite-node] is unable to load my file

I also copy pasted the exact same code from @shared/types to another file and it failed

It works if I add another alias explicitly for helperTestFunctions in both tsconfig.json and vitest.config.ts but why is it not working with @shared/* alias ?

Solution

  • Okay I finally figured it out I replaced

    {find: "@shared/*", replacement: path.resolve(__dirname, './src/shared/*') },

    to

    {find: "@shared", replacement: path.resolve(__dirname, './src/shared') },

    in my vitest.config.ts

    I still don't know why @shared/types was working but i suspect its due to * being parsed as a string literal rather than a regex expression.