Nx Monorepo配置应用内绝对导入后根包导入失效问题

问题根源 #

你的apps/pay-platform/tsconfig.app.json中设置了baseUrl: "./src"，这会覆盖根目录tsconfig.base.json中的baseUrl: "."。由于根包路径（如@skuad/sk-ui）是相对于根目录定义的，当应用的baseUrl改为./src后，这些路径会被解析为src/packages/sk-ui/src/index.ts（不存在的路径），导致导入失败。

修复步骤 #

1. 调整应用的TS配置文件

修改apps/pay-platform/tsconfig.app.json，移除自定义的baseUrl，让它继承根目录的baseUrl: "."，同时调整helpers路径以适配根baseUrl：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    ...
    // 移除 "baseUrl": "./src"
    "paths": {
      "helpers/*": ["src/helpers/*"]
    }
  },
  ...
}

这样import { consoleLog } from 'helpers/xxx'依然可以正常工作，同时根包的路径也能基于根目录正确解析。

2. 简化Vite插件配置

Nx的nxViteTsPaths插件已经内置了处理Monorepo路径解析的能力，无需额外使用vite-tsconfig-paths。修改apps/pay-platform/vite.config.ts：

import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';

...
plugins: [react(), nxViteTsPaths()],
...

移除viteTsconfigPaths的导入和调用，避免插件冲突。

3. 验证包的入口配置

确保每个根包的入口文件（如packages/sk-ui/src/index.ts）正确导出了需要的组件：

// packages/sk-ui/src/index.ts
export { Button } from './components/Button';

4. 重启开发服务器

修改配置后，重启Nx开发服务器，确保新的配置生效：

nx serve pay-platform

额外检查 #

• 确认apps/pay-platform/tsconfig.json正确继承了根目录的tsconfig.base.json：

  {
    "extends": "../../tsconfig.base.json",
    ...
  }
  

• 运行nx graph查看应用与根包的依赖关系是否正确关联。

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