NX集成React Monorepo中@myorg/common-ui路径解析失败求助

核心问题定位 #

你导入的模块别名是@myorg/common-ui，但根目录tsconfig.base.json的paths配置里写的是@amir/common-ui，别名完全不匹配，这是导致错误的直接原因。

分步解决方案 #

1. 修正模块别名映射 #

修改根目录tsconfig.base.json中的paths配置，将别名改为你实际使用的@myorg/common-ui：

// tsconfig.base.json
{
  "compileOnSave": false,
  "compilerOptions": {
    // 其他配置保持不变
    "paths": {
      "@myorg/common-ui": ["libs/common-ui/src/index.ts"],
      "@myorg/products": ["libs/products/src/index.ts"]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

2. 验证库的入口文件 #

确认libs/common-ui/src/index.ts存在，并且正确导出Banner组件：

// libs/common-ui/src/index.ts
export { Banner } from './components/Banner'; // 替换为你的实际组件路径

3. 开启类型声明生成（可选但推荐） #

将tsconfig.base.json中的declaration设为true，让TypeScript生成类型声明文件，提升IDE的类型识别能力：

"declaration": true,

4. 清除TypeScript缓存并重启IDE #

• 在VSCode中按下Ctrl+Shift+P，执行TypeScript: Restart TS Server
• 或者直接重启IDE，确保新的配置生效

5. 确认项目配置继承关系 #

检查apps目录下的tsconfig.json是否正确继承了根目录的tsconfig.base.json，你的当前配置已经正确设置了"extends": "../../tsconfig.base.json"，这部分无需修改。

原问题及配置信息 #

我是NX Monorepo新手，严格按照NX官网教程创建集成式React单体仓库，但在执行import { Banner } from '@myorg/common-ui';时出现错误：Cannot find module '@myorg/common-ui' or its corresponding type declarations.ts(2307)。

根目录tsconfig.base.json #

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2020", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@amir/common-ui": ["libs/common-ui/src/index.ts"],
      "@amir/products": ["libs/products/src/index.ts"]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

apps目录下React项目的tsconfig.app.json #

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "types": ["node", "vite/client"]
  },
  "files": [
    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
    "../../node_modules/@nx/react/typings/image.d.ts"
  ],
  "exclude": [
    "src/**/*.spec.ts",
    "src/**/*.test.ts",
    "src/**/*.spec.tsx",
    "src/**/*.test.tsx",
    "src/**/*.spec.js",
    "src/**/*.test.js",
    "src/**/*.spec.jsx",
    "src/**/*.test.jsx"
  ],
  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
}

apps目录下React项目的tsconfig.json #

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "allowJs": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "types": ["vite/client", "vitest"]
  },
  "files": [],
  "include": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.spec.json" }
  ],
  "extends": "../../tsconfig.base.json"
}

apps目录下React项目的tsconfig.spec.json #

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node"]
  },
  "include": [
    "vite.config.ts",
    "src/**/*.test.ts",
    "src/**/*.spec.ts",
    "src/**/*.test.tsx",
    "src/**/*.spec.tsx",
    "src/**/*.test.js",
    "src/**/*.spec.js",
    "src/**/*.test.jsx",
    "src/**/*.spec.jsx",
    "src/**/*.d.ts"
  ],
  "files": [
    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
    "../../node_modules/@nx/react/typings/image.d.ts"
  ]
}

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