Problem setting up in a Next.js project with flat config, rules not enforced at all

[alexander-larsson]

I am migrating a Next.js project to ESLint 9 with flat file format. I have gotten every plugin to work quite simply by following what it says in each projects docs. However, I cannot make "eslint-plugin-cypress" work at all. I add the configuration, and ESLint runs just fine but the cypress eslint rules are never enforced. For example to test it I add cy.wait(5000) and cy.pause() in some cypress tests and run the linter and it doesn't give any errors as I have configured it to do.

Is there something weird going on when using this together with Next.js? I have spent hours trying different things.

The cypress files are in a /cypress folder and all other code in /src under the __basedir. But this should not matter right?

Versions:

    "cypress": "13.15.0",
    "eslint": "^9.13.0",
    "eslint-config-next": "15.0.1",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-cypress": "^4.0.0",
    "eslint-plugin-formatjs": "^5.1.5",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-testing-library": "^6.4.0",

The config:

import { FlatCompat } from '@eslint/eslintrc';
import js from '@eslint/js';
import pluginCypress from 'eslint-plugin-cypress/flat';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
import path from 'node:path';
import { fileURLToPath } from 'node:url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended,
  allConfig: js.configs.all,
});

export default [
  ...compat.extends('next/core-web-vitals', 'next/typescript'),
  ...compat.plugins('formatjs'),
  {
    rules: {
     // some other rules here
    },
  },
  eslintPluginPrettierRecommended,
  pluginCypress.configs.recommended,
  {
    rules: {
      'cypress/no-pause': 'error',
      'cypress/no-unnecessary-waiting': 'error',
      'cypress/unsafe-to-chain-command': 'off',
    },
  },
  {
    ignores: [
      '**/node_modules/',
      '**/coverage/',
      '**/dist/',
      '**/build/',
      '**/out/',
      '**/.next/',
    ],
  },
];

[MikeMcC399]

@alexander-larsson

If I comment out

//  ...compat.extends('next/core-web-vitals', 'next/typescript'),
//  eslintPluginPrettierRecommended,

then Cypress linting works fine.

You might try moving pluginCypress.configs.recommended, up in the config.

There is a https://github.com/eslint/config-inspector which is sometimes helpful.

When installing your dependencies there are dependency conflicts, however I don't think they would be causing your issue:

npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @typescript-eslint/[email protected]
npm warn Found: [email protected]
npm warn node_modules/eslint
npm warn   eslint@"^9.13.0" from the root project
npm warn   15 more (@eslint-community/eslint-utils, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer eslint@"^6.0.0 || ^7.0.0 || ^8.0.0" from @typescript-eslint/[email protected]
npm warn node_modules/eslint-plugin-testing-library/node_modules/@typescript-eslint/utils
npm warn   @typescript-eslint/utils@"^5.62.0" from [email protected]
npm warn   node_modules/eslint-plugin-testing-library
npm warn
npm warn Conflicting peer dependency: [email protected]
npm warn node_modules/eslint
npm warn   peer eslint@"^6.0.0 || ^7.0.0 || ^8.0.0" from @typescript-eslint/[email protected]
npm warn   node_modules/eslint-plugin-testing-library/node_modules/@typescript-eslint/utils
npm warn     @typescript-eslint/utils@"^5.62.0" from [email protected]
npm warn     node_modules/eslint-plugin-testing-library

https://eslint.org/chat also offers ESLint assistance.

[alexander-larsson]

@MikeMcC399 Thank you for the tip about the config inspector, however it crashed when I try to run it.

Command: npx @eslint/config-inspector@latest --config eslint.config.mjs

Opens the browser with this message:

Failed to load eslint.config.js
Error: Cannot read config file: /Users/alexander/Code/platform/admin-frontend/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/eslint-config-next/index.js
Error: Failed to patch ESLint because the calling module was not recognized.
If you are using a newer ESLint version that may be unsupported, please create a GitHub issue:
https://github.com/microsoft/rushstack/issues
Referenced from: /Users/alexander/Code/platform/admin-frontend/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/eslint-config-next/core-web-vitals.js

I did however try running eslint directly instead of the next lint command and then it works. So then I guess it's the fault of the next lint command. But all other plugins I tried works with it so maybe also something going on with this plugin?

EDIT: I found the problem.

There is a directory setting in next.config.js that was set to only /src 3 years ago in our project. So there was actually no problem with this plugin. I just changed this to be like code below and it worked. (Only linting /src is also the default setting apparently according to the docs)

eslint: {
    dirs: ['src/', 'cypress/'],
},

I do however wonder how can I configure this plugin to only apply to files with the filename that ends with .cy.js in the folder /cypress? Does the plugin have some kind of rule like this by default when just adding pluginCypress.configs.recommended?

[MikeMcC399]

@alexander-larsson

Good to see that you found the issue!

Does the plugin have some kind of rule like this by default when just adding pluginCypress.configs.recommended?

The plugin doesn't define any files to check. You can look into the source directory lib to understand the definitions.

The ESLint documentation https://eslint.org/docs/latest/use/configure/configuration-files provides some explanation about how file selection is supposed to work.

[alexander-larsson]

So is it correct then to do like this?

   {
    ...pluginCypress.configs.recommended,
    files: ['cypress/**/*.js'],
    rules: {
      ...pluginCypress.configs.recommended.rules,
      'cypress/no-pause': 'error',
      'cypress/no-unnecessary-waiting': 'error',
      'cypress/unsafe-to-chain-command': 'off',
    },
  }

I didn't get it to work with files: ['cypress/**/*.cy.js'], for some reason.

Thanks for all your help!

[MikeMcC399]

Discord is probably your best bet to get expert configuration help. I also haven't been able to translate the ESLint documentation into a working example in this regard.

[MikeMcC399]

@alexander-larsson

The following seems to work:

import pluginCypress from 'eslint-plugin-cypress/flat';

export default [
  {
    files: ['cypress/**/*.cy.js'],
    plugins: {
      cypress: pluginCypress
    },
    ...pluginCypress.configs.recommended,
    rules: {
      ...pluginCypress.configs.recommended.rules,
      'cypress/no-pause': 'error',
      'cypress/no-unnecessary-waiting': 'error',
      'cypress/unsafe-to-chain-command': 'off',
    },
  },
];

Also if you have difficulty combining configurations you can write separate ones and use the eslint --config to run linting for each configuration separately.

eslint --inspect-config

is good for checking when there are no legacy configs involved.

[alexander-larsson]

Ok, I got it working now thanks!