nx icon indicating copy to clipboard operation
nx copied to clipboard

Generated library has eslint.config.js for wrong version of ESLint

Open e-oz opened this issue 1 year ago • 3 comments

Current Behavior

We use ESLint 8 because of this issue. Nx 20 generates incorrect config, example:

const nx = require('@nx/eslint-plugin');
const baseConfig = require('../../../eslint.config.js');

module.exports = [
  ...baseConfig,
  ...nx.configs['flat/angular'],
  ...nx.configs['flat/angular-template'],
  {
    files: ['**/*.ts'],
    rules: {
      '@angular-eslint/directive-selector': [
        'error',
        {
          type: 'attribute',
          prefix: 'cr',
          style: 'camelCase',
        },
      ],
      '@angular-eslint/component-selector': [
        'error',
        {
          type: 'element',
          prefix: 'cr',
          style: 'kebab-case',
        },
      ],
    },
  },
  {
    files: ['**/*.html'],
    // Override or add rules here
    rules: {},
  },
];

After that Nx can not run any command, and fails with

 NX   Failed to process project graph. Run "nx reset" to fix this. Please report the issue if you keep seeing it.

Expected Behavior

Please check ESLint version and generate a correct config. Example of correct config:

const { FlatCompat } = require('@eslint/eslintrc');
const js = require('@eslint/js');
const baseConfig = require('../../../eslint.config.js');

const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended,
});

module.exports = [
  ...baseConfig,
  ...compat
    .config({
      extends: [
        'plugin:@nx/angular',
        'plugin:@angular-eslint/template/process-inline-templates',
      ],
    })
    .map((config) => ({
      ...config,
      files: ['**/*.ts'],
      rules: {
        ...config.rules,
        '@angular-eslint/directive-selector': [
          'error',
          {
            type: 'attribute',
            prefix: 'cr',
            style: 'camelCase',
          },
        ],
        '@angular-eslint/component-selector': [
          'error',
          {
            type: 'element',
            prefix: 'cr',
            style: 'kebab-case',
          },
        ],
      },
      languageOptions: {
        parserOptions: {
          project: ['libs/shared/delivery-address/tsconfig.*?.json'],
        },
      },
    })),
  ...compat
    .config({ extends: ['plugin:@nx/angular-template'] })
    .map((config) => ({
      ...config,
      files: ['**/*.html'],
      rules: {
        ...config.rules,
      },
    })),
];

GitHub Repo

No response

Steps to Reproduce

  1. Create Angular workspace with ESLint 8
  2. run nx g @nx/angular:library

Nx Report

NX Report complete - copy this into the issue template

Node : 22.9.0 OS : darwin-arm64 Native Target : aarch64-macos npm : 10.8.3

nx : 20.0.0 @nx/js : 20.0.0 @nx/jest : 20.0.0 @nx/eslint : 20.0.0 @nx/workspace : 20.0.0 @nx/angular : 20.0.0 @nx/devkit : 20.0.0 @nx/eslint-plugin : 20.0.0 @nx/playwright : 20.0.0 @nx/vite : 20.0.0 @nx/web : 20.0.0 @nx/webpack : 20.0.0 typescript : 5.6.2

Registered Plugins: @nx/playwright/plugin @nx/eslint/plugin

Failure Logs

⚠️ Unable to construct project graph. Failed to process project graph. Run "nx reset" to fix this. Please report the issue if you keep seeing it. Failed to process project graph. Run "nx reset" to fix this. Please report the issue if you keep seeing it. An error occurred while processing files for the @nx/eslint/plugin plugin.

  • libs/shared/copy-to-clipboard/eslint.config.js: Cannot find module 'angular-eslint' Require stack:
    • /Users/oz/repos/project/workspace-name/node_modules/@nx/eslint-plugin/src/flat-configs/angular.js
  • /Users/oz/repos/project/workspace-name/node_modules/@nx/eslint-plugin/src/index.js
  • /Users/oz/repos/project/workspace-name/libs/shared/copy-to-clipboard/eslint.config.js Error: Cannot find module 'angular-eslint' Require stack:
    • /Users/oz/repos/project/workspace-name/node_modules/@nx/eslint-plugin/src/flat-configs/angular.js
  • /Users/oz/repos/project/workspace-name/node_modules/@nx/eslint-plugin/src/index.js
  • /Users/oz/repos/project/workspace-name/libs/shared/copy-to-clipboard/eslint.config.js at Module._resolveFilename (node:internal/modules/cjs/loader:1248:15) at Module._load (node:internal/modules/cjs/loader:1074:27) at TracingChannel.traceSync (node:diagnostics_channel:315:14) at wrapModuleLoad (node:internal/modules/cjs/loader:217:24) at Module.require (node:internal/modules/cjs/loader:1339:12) at require (node:internal/modules/helpers:135:16) at Object. (/Users/oz/repos/project/workspace-name/node_modules/@nx/eslint-plugin/src/flat-configs/angular.js:4:50) at Module._compile (node:internal/modules/cjs/loader:1546:14) at Module._extensions..js (node:internal/modules/cjs/loader:1691:10) at Module.load (node:internal/modules/cjs/loader:1317:32)

Package Manager Version

npm 10.8.3

Operating System

  • [x] macOS
  • [ ] Linux
  • [ ] Windows
  • [ ] Other (Please specify)

Additional Information

No response

e-oz avatar Oct 08 '24 12:10 e-oz