构建型库无法导入非构建型库接口的ESLint错误排查

问题原因 #

Nx的buildable类型库有明确依赖约束：仅允许导入工作区内的buildable库，或经过配置允许的外部npm包。你遇到的ESLint错误，是@nrwl/nx/enforce-buildable-libs规则检测到@vite/prop-types不符合该约束——要么它是工作区内的非buildable自定义库，要么规则未正确识别它为外部依赖。

解决方案 #

方案1：允许导入外部依赖（若@vite/prop-types是npm包） #

如果@vite/prop-types是通过npm安装的外部包，修改ESLint配置将其加入允许列表：

1. 打开当前库或工作区根目录的.eslintrc.json文件
2. 在rules节点下更新规则：

{
  "rules": {
    "@nrwl/nx/enforce-buildable-libs": [
      "error",
      {
        "allow": ["@vite/prop-types"]
      }
    ]
  }
}

方案2：将工作区内的@vite/prop-types转为buildable #

如果@vite/prop-types是你工作区内的自定义库，执行命令将其升级为buildable类型：

nx g @nrwl/js:convert-to-buildable @vite/prop-types

执行后Nx会自动为该库添加构建配置，满足buildable库的依赖要求。

方案3：直接定义类型（替代外部导入） #

如果DetailsProps结构简单，可直接在当前文件内定义类型，避免依赖导入：

interface DetailsProps {
  name: string;
  city: string;
  pin: number;
}

const initialDetails: DetailsProps = {
  name: 'Arif',
  city: 'Chennai',
  pin: 600019,
};
// 后续组件代码保持不变

验证修复 #

运行以下命令检查ESLint错误是否消除：

nx lint [你的库名称]

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