NX Monorepo扩展lint-staged配置时模块边界报错的解决方法

问题场景 #

我有一个NX Monorepo，包含一个基于Nest.js的api应用。在根目录创建了基础的lintstaged.config.js，想在各应用中扩展该配置，但提交代码时触发错误：

External resources cannot be imported using a relative or absolute path @nx/enforce-module-boundaries

现有配置代码 #

根目录lint-staged.config.js：

const config = {
  "*.{js,jsx,ts,tsx}": [
    "eslint --cache --fix",
    "prettier --write"
  ],
  "*.{json,md,css,scss,html,yml,yaml}": [
    "prettier --write"
  ]
};

export default config;

apps/api/lint-staged.config.js：

import rootConfig from '../../lint-staged.config.js'; // 触发错误的行
export default { ...rootConfig };

解决方法 #

方法一：改用CommonJS语法导入 #

NX的@nx/enforce-module-boundaries规则对ES模块的import检查严格，改用CommonJS的require可以绕过这个限制：

1. 修改根目录配置为CommonJS导出：

   module.exports = {
     "*.{js,jsx,ts,tsx}": [
       "eslint --cache --fix",
       "prettier --write"
     ],
     "*.{json,md,css,scss,html,yml,yaml}": [
       "prettier --write"
     ]
   };
   

2. 修改api应用的配置：

   const rootConfig = require('../../lint-staged.config.js');
   module.exports = { ...rootConfig };
   

方法二：直接使用全局根配置 #

NX默认会读取根目录的lint-staged.config.js作为所有项目的全局规则。如果不需要针对api应用做特殊配置，直接删除apps/api/lint-staged.config.js即可，提交时会自动应用根配置。

方法三：将配置封装为NX库（推荐长期复用方案） #

如果需要在多个项目中复用配置，符合NX的模块边界规范的做法是把配置封装为NX库：

1. 创建配置库：

   nx g @nx/js:library lint-config
   

2. 在库中创建lint-staged.config.js并导出根配置内容
3. 在api应用的配置中导入库中的配置：

   import rootConfig from '@your-workspace/lint-config/lint-staged.config';
   export default { ...rootConfig };
   

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