NX项目中无法使用TypeScript简单路径别名且无法从React应用导入共享库

嘿，我之前也碰到过一模一样的问题！NX里导入共享库其实没那么复杂，大概率是路径配置或者导出环节出了小问题，我给你一步步理清楚：

1. 先确认NX的路径别名规则 #

NX默认会给每个生成的库配置工作区别名，格式一般是@你的工作区名称/库名称，比如你的工作区叫myworkspace，共享库叫shared-utils，那导入的时候就得用import { xxx } from '@myworkspace/shared-utils'，别直接写相对路径，很容易出错。

2. 检查根目录的tsconfig.base.json配置 #

这个文件是所有项目的基础TS配置，必须确保paths里已经正确映射了你的共享库：

{
  "compilerOptions": {
    // ...其他配置
    "paths": {
      "@myworkspace/shared-utils": ["libs/shared-utils/src/index.ts"]
    }
  }
}

注意：路径要和你的库实际位置对应，比如你的库在apps旁边的libs/shared文件夹下，那路径就是["libs/shared/src/index.ts"]，别名前缀要和NX生成的一致（一般是@工作区名/库名）。

3. 确保共享库的入口文件正确导出 #

去你的共享库根目录的src/index.ts（也就是库的入口文件）里，确认已经导出了你要在React应用里用的组件/函数：

// 比如导出一个共享按钮组件
export { SharedButton } from './lib/shared-button/shared-button';

如果没导出，就算路径配置对了，React应用也找不到对应的内容。

4. 检查React应用的TS配置是否继承了基础配置 #

打开React应用（apps/myfrontend）里的tsconfig.json，确保它已经继承了根目录的tsconfig.base.json：

{
  "extends": "../../tsconfig.base.json",
  // ...其他配置
}

这一步很关键，不然应用读不到根目录的路径别名配置。

5. 重启开发服务器+清理缓存 #

有时候修改配置后，NX的开发服务器不会自动刷新，关掉当前的nx serve myfrontend命令，重新启动一次。如果还是不行，可以试试清理NX缓存：

nx reset

然后再重启服务。

6. 用NX官方命令生成库（避坑小技巧） #

如果你是手动创建的共享库，很容易漏配置，建议用NX的官方命令生成库，它会自动帮你搞定所有路径和依赖配置：

nx g @nx/react:lib shared-utils

这样生成的库，直接就能在React应用里用别名导入了。

最后再提醒一下：如果ESLint报错说找不到模块，检查一下React应用的eslint.config.mjs，确保已经包含了@nx/eslint-plugin的配置，它会帮ESLint识别NX的路径别名。

备注：内容来源于stack exchange，提问作者yoyobara