TS Config与Vite别名路径无法解析，请求排查解决

项目目录结构 #

app
- src
-- features
--- app-shell
--- dashboard-3dl-parser
--- data-components
--- visualizations
---- filters
----- filter.tsx 
---- visuals
---- base-visuals
---- chart-visuals
---- dashboard
----- dashboard.tsx
---- visual-utils

当前配置 #

vite.config.ts #

export default defineConfig({
  plugins: [react()],
  base: "./",
  resolve: {
    alias: [
      {
        find: /^~(.+)/,
        replacement: path.join(process.cwd(), "node_modules/$1"),
      },
      {
        find: /^src(.+)/,
        replacement: path.join(process.cwd(), "src/$1"),
      },
      {
        find: "@core",
        replacement: path.resolve(__dirname, "src/core"),
      },
      {
        find: "@features",
        replacement: path.resolve(__dirname, "src/features"),
      },
      {
        find: "@utils",
        replacement: path.resolve(__dirname, "src/utils"),
      },
      {
        find: "@services",
        replacement: path.resolve(__dirname, "src/core/services"),
      },
    ],
  }
});

tsconfig.json #

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Default",
  "compilerOptions": {
    "checkJs": true,
    "allowJs": true,
    "types": ["vite/client", "vitest"],
    "baseUrl": "./",
    "paths": {
      "@core/*": ["src/core/*"],
      "@features/*": ["src/features/*"],
      "@utils/*": ["src/utils/*"],
      "@services/*": ["src/core/services/*"]
    }
  },
  "exclude": ["node_modules"],
  "include": ["**/*.cjs", "**/*.mjs", "**/*.ts", "**/*.tsx"]
}

问题现象 #

• 正常工作的导入（在src/features/dashboard-3dl-parser/Dashboard3DL.tsx中）：

  import useThemeData from "@features/dashboard-3dl-parser/hooks/useTheme";
  

• 报错的导入（在src/features/visualizations/chart-visuals/下的文件中）：

  import { useThemeContext } from "@features/visualizations/dashboard/dashboard";
  

• 错误信息：

  Error: src/features/visualizations/chart-visuals/percent-stacked-bar-chart.visual.tsx(2,33): error TS2307: Cannot find module '@features/visualizations/dashboard/dashboard' or its corresponding type declarations.
  Error: src/features/visualizations/chart-visuals/stacked-bar-chart.visual.tsx(2,33): error TS2307: Cannot find module '@features/visualizations/dashboard/dashboard' or its corresponding type declarations.
  

解决步骤 #

1. 补全文件扩展名或配置自动识别 #

TypeScript不会自动补全.tsx扩展名，要么在导入时加上：

import { useThemeContext } from "@features/visualizations/dashboard/dashboard.tsx";

要么在tsconfig.json的compilerOptions里添加扩展名列表，让TypeScript自动识别：

"compilerOptions": {
  // 其他原有配置...
  "extensions": [".ts", ".tsx", ".js", ".jsx"]
}

2. 修改Vite别名匹配规则 #

当前Vite中@features是精确匹配字符串，带子路径的别名解析会出问题，把所有别名改成正则匹配前缀的形式：

resolve: {
  alias: [
    {
      find: /^~(.+)/,
      replacement: path.join(process.cwd(), "node_modules/$1"),
    },
    {
      find: /^src(.+)/,
      replacement: path.join(process.cwd(), "src/$1"),
    },
    {
      find: /^@core(.+)/,
      replacement: path.resolve(__dirname, "src/core/$1"),
    },
    {
      find: /^@features(.+)/,
      replacement: path.resolve(__dirname, "src/features/$1"),
    },
    {
      find: /^@utils(.+)/,
      replacement: path.resolve(__dirname, "src/utils/$1"),
    },
    {
      find: /^@services(.+)/,
      replacement: path.resolve(__dirname, "src/core/services/$1"),
    },
  ],
}

3. 重启服务生效 #

修改配置后：

• 重启Vite开发服务器
• 如果用VSCode，按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），执行TypeScript: Restart TS Server，让TypeScript重新读取配置

4. 检查文件导出 #

确认dashboard.tsx里确实导出了useThemeContext：

// dashboard.tsx
export const useThemeContext = () => {
  // 你的业务逻辑
};

额外验证点 #

如果问题仍存在，检查：

• 文件路径是否有大小写错误（部分操作系统区分大小写）
• tsconfig.json的include配置已经覆盖了visualizations目录下的所有文件（当前配置没问题）

内容的提问来源于stack exchange，提问作者CKW