Is "*" in path resolver supported?

[crhistianramirez]

In my tsconfig.json I have the following:

{
  "compilerOptions": {
    "paths":  {
      "@*": ["./src/*"]
    }
  }
}

And in my src directory I have multiple subfolders such as components and utils which I can then import like so:

import blah from '@components/somefile'
import blah2 from '@utils/anotherfile'

This is particularly nice because I don't need to update my tsconfig file if a new folder is created under src it will just work. I tried to use this library but got a bunch of import errors. I also ran it with the DEBUG flag and it correctly found my tsconfig.json file but just doesn't seem to be working. Any ideas? Here is the debug output:

$ /Users/crhistianramirez/Documents/neokit/node_modules/.bin/vite
  vite-tsconfig-paths options.root   == undefined +0ms
  vite-tsconfig-paths project root   == /Users/crhistianramirez/Documents/neokit +1ms
  vite-tsconfig-paths workspace root == /Users/crhistianramirez/Documents/neokit +0ms
  vite-tsconfig-paths projects: [ '/Users/crhistianramirez/Documents/neokit/tsconfig.json' ] +284ms
  vite-tsconfig-paths config loaded: {
  configPath: '/Users/crhistianramirez/Documents/neokit/tsconfig.node.json',
  config: {
    compilerOptions: {
      composite: true,
      module: 'ESNext',
      moduleResolution: 'Node',
      allowSyntheticDefaultImports: true
    },
    include: [ 'vite.config.ts' ]
  }
} +55ms
  vite-tsconfig-paths [!] missing baseUrl and paths: "/Users/crhistianramirez/Documents/neokit/tsconfig.node.json" +3ms
  vite-tsconfig-paths config loaded: {
  configPath: '/Users/crhistianramirez/Documents/neokit/tsconfig.json',
  config: {
    compilerOptions: {
      target: 'ESNext',
      useDefineForClassFields: true,
      module: 'ESNext',
      moduleResolution: 'Node',
      strict: true,
      jsx: 'preserve',
      resolveJsonModule: true,
      isolatedModules: true,
      esModuleInterop: true,
      lib: [ 'ESNext', 'DOM' ],
      skipLibCheck: true,
      noEmit: true,
      types: [
        'node',
        'vite/client',
        'vite-plugin-pages/client',
        'vite-plugin-vue-layouts/client',
        'unplugin-icons/types/vue',
        'element-plus/global'
      ],
      paths: { '@*': [ './src/*' ] }
    },
    include: [
      'src/**/*.ts',
      'src/**/*.d.ts',
      'src/**/*.tsx',
      'src/**/*.vue',
      'components.d.ts',
      'auto-imports.d.ts'
    ],
    references: [ { path: './tsconfig.node.json' } ]
  }
} +2ms
  vite-tsconfig-paths compiled globs: {
  includers: [
    /^\.\/src\/((?:[^/]*(?:\/|$))*)([^/]*)\.ts$/,
    /^\.\/src\/((?:[^/]*(?:\/|$))*)([^/]*)\.d\.ts$/,
    /^\.\/src\/((?:[^/]*(?:\/|$))*)([^/]*)\.tsx$/,
    /^\.\/src\/((?:[^/]*(?:\/|$))*)([^/]*)\.vue$/,
    /^\.\/components\.d\.ts\/((?:[^/]*(?:\/|$))*)$/,
    /^\.\/components\.d\.ts$/,
    /^\.\/auto-imports\.d\.ts\/((?:[^/]*(?:\/|$))*)$/,
    /^\.\/auto-imports\.d\.ts$/
  ],
  excluders: [
    /^\.\/((?:[^/]*(?:\/|$))*)node_modules\/((?:[^/]*(?:\/|$))*)$/,
    /^\.\/((?:[^/]*(?:\/|$))*)bower_components\/((?:[^/]*(?:\/|$))*)$/,
    /^\.\/((?:[^/]*(?:\/|$))*)jspm_packages\/((?:[^/]*(?:\/|$))*)$/
  ]
} +1ms

[kasir-barati]

Do you have something like this log in the terminal?

vite-tsconfig-paths resolved: {
  id: '@backend/src/main',
  importer: '/home/kasir/projects/node.js.developers.kh/apps/frontend/src/pages/contactUs/contactUsApi.slice.tsx',
  resolvedId: '/home/kasir/projects/node.js.developers.kh/apps/backend/src/main.ts',
  configPath: '/home/kasir/projects/node.js.developers.kh/apps/frontend/tsconfig.json'
} +164ms

[kasir-barati]

BTW I am facing a weird issue with this lib, here is what I did:

./tsconfig.json

{
    "compileOnSave": true,
    "compilerOptions": {
        "noUnusedLocals": true,
        "allowJs": false,
        "noUnusedParameters": true,
        "isolatedModules": true,
        "noImplicitReturns": false,
        "skipDefaultLibCheck": true,
        "incremental": true,
        "target": "es2017",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "module": "commonjs",
        "baseUrl": "./",
        "resolveJsonModule": true,
        "declaration": true,
        "sourceMap": true,
        "outDir": "./dist",
        "removeComments": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "noImplicitAny": false,
        "strictNullChecks": true,
        "strictBindCallApply": true,
        "strictPropertyInitialization": false,
        "alwaysStrict": true,
        "noFallthroughCasesInSwitch": true,
        "skipLibCheck": true,
        "moduleResolution": "node"
    },
    "exclude": [
        "node_modules",
        "**/*.d.ts",
        "__tests__",
        "test",
        "jest.config.ts",
        "dist",
        "**/*spec.ts"
    ]
}

./apps/backend/tsconfig.json

{
    "extends": "../../tsconfig.json",
    "compilerOptions": {
        "module": "commonjs",
        "target": "es2017",
        "outDir": "./dist",
        "baseUrl": "./",
        "paths": {
            "shared/*": ["./src/shared/*"]
        },
        "composite": true
    },
    "exclude": [
        "node_modules",
        "__tests__",
        "test",
        "jest.config.ts",
        "dist",
        "**/*spec.ts"
    ]
}

./apps/frontend/tsconfig.json

{
    "compilerOptions": {
        "noUnusedLocals": true,
        "allowJs": false,
        "noUnusedParameters": true,
        "noImplicitReturns": false,
        "skipDefaultLibCheck": true,
        "incremental": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "declaration": true,
        "sourceMap": true,
        "removeComments": true,
        "esModuleInterop": true,
        "noImplicitAny": false,
        "strictNullChecks": true,
        "strictBindCallApply": true,
        "strictPropertyInitialization": false,
        "alwaysStrict": true,
        "noFallthroughCasesInSwitch": true,
        "target": "ESNext",
        "useDefineForClassFields": true,
        "outDir": "./dist",
        "baseUrl": "./",
        "lib": ["DOM", "DOM.Iterable", "ESNext"],
        "skipLibCheck": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "paths": {
            "components/*": ["./src/components/*"],
            "pages/*": ["./src/pages/*"],
            "backend/*": ["../backend/*"]
        }
    },
    "references": [
        { "path": "./tsconfig.node.json" },
        {
            "path": "../backend/tsconfig.json"
        }
    ]
}

vite.config.ts

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [tsconfigPaths(), react()],
    // resolve: {
    //     alias: {
    //         'backend': resolve(__dirname, '../backend/src/'),
    //     },
    // },
});

I can resolve the issue with the commented code but TBH I am just curious why it is not working in one project while it is working in another one.

[kasir-barati]

Update

I realized that when I use the commented solution it wont complain when start the project but the thing is that it cannot show the react app in the browser since it throw an error in the terminal when I open index page.

[aleclarson]

Hey Kasir, I can help if you reproduce the issue in a simple demo and open another issue with a description of the expected behavior and the actual behavior.

[aleclarson]

Could not reproduce the original issue