Pages directory cannot be found at /monorepo/pages or /monorepo/src/pages. If using a custom path, please configure with the no-html-link-for-pages rule in your eslint config file

[oste]

It seems there can be some conflicts between eslint rules and mono repo file structure. I was seeing above error using @next/next/no-html-link-for-pages. I added to my app and it works now.

  settings: {
    next: {
      rootDir: 'apps/my-poney',
    },
  },

More info can be found here: vercel/next.js#26330

Thanks for the awesome how-tos and examples.

[belgattitude]

@oste thanks for reporting.

Couldn't reproduce on this repo...

Are you using the /.eslint.base.js and ./apps/web-app/.eslint.js strategy ?

Cause as far as I understand it, you shouldn't have this problem

Let me know, cause if it's affecting you, maybe I can add the rootDir.next in the example.

[oste]

yes I have

eslint.base.js:

module.exports = {
  root: true,
  env: {
    node: true,
    es6: true,
  },
  ignorePatterns: ['node_modules/*'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
      globalReturn: false,
    },
    ecmaVersion: 2020,
    project: ['tsconfig.json'],
  },
  settings: {
    react: {
      version: 'detect',
    },
    'import/resolver': {
      typescript: {},
    },
  },
  extends: [
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: [
    'jest',
  ],
  globals: {
    context: 'readonly',
    cy: 'readonly',
    assert: 'readonly',
    Cypress: 'readonly',
  },
  rules: {
    'linebreak-style': ['error', 'unix'],
  },
  overrides: [
    {
      files: ['*.{ts,tsx}'],
      rules: {
        '@typescript-eslint/consistent-type-exports': 'error',
        '@typescript-eslint/consistent-type-imports': 'error',
        'no-empty-function': 'off',
        '@typescript-eslint/no-empty-function': [
          'error',
          { allow: ['private-constructors'] },
        ],
        '@typescript-eslint/no-unused-vars': [
          'warn',
          { argsIgnorePattern: '^_' },
        ],
        'import/default': 'off',
        'import/no-named-as-default-member': 'off',
        'import/no-named-as-default': 'off',
        'import/order': [
          'error',
          {
            groups: [
              'builtin',
              'external',
              'internal',
              'parent',
              'sibling',
              'index',
              'object',
            ],
            alphabetize: { order: 'asc', caseInsensitive: true },
          },
        ],
      },
    },
    {
      // For performance run jest/recommended on test files, not regular code
      files: ['**/__tests__/**/*.{ts,tsx}', '**/?(*.)+(test).{ts,tsx}'],
      extends: ['plugin:jest/recommended'],
      rules: {
        '@typescript-eslint/no-non-null-assertion': 'off',
        '@typescript-eslint/no-object-literal-type-assertion': 'off',
        '@typescript-eslint/no-empty-function': 'off',
      },
    },
    {
      files: ['*.js'],
      parser: 'espree',
      parserOptions: {
        ecmaVersion: 2020,
      },
      rules: {
        '@typescript-eslint/ban-ts-comment': 'off',
        '@typescript-eslint/no-explicit-any': 'off',
        '@typescript-eslint/no-var-requires': 'off',
        '@typescript-eslint/explicit-module-boundary-types': 'off',
        // 'sonarjs/no-duplicate-string': 'off',
        // 'sonarjs/no-all-duplicated-branches': 'off',
      },
    },
  ],
};

eslintrc.js

// See ../../.eslintrc.base.js
module.exports = {
  settings: {
    next: {
      rootDir: 'apps/test',
    },
  },
  root: true,
  ignorePatterns: ['node_modules/*', '.next'],
  extends: [
    '../../.eslintrc.base.js',
    // Add specific rules for react and nextjs
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:@next/next/core-web-vitals',
  ],
  // By loading testing-library as a plugin, we can only enable it
  // on test files via overrides.
  plugins: ['testing-library'],
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  rules: {
    'react/prop-types': 'off',
    'react/react-in-jsx-scope': 'off',
    'jsx-a11y/anchor-is-valid': 'off',
    'react/no-unescaped-entities': 'off',

    // next/image might not be yet a good move as of NextJs v11.
    // https://github.com/vercel/next.js/discussions/16832
    '@next/next/no-img-element': 'off',
  },
  overrides: [
    {
      // For performance run jest/recommended on test files, not regular code
      files: ['**/*.test.{ts,tsx}'],
      extends: ['plugin:testing-library/react'],
    },
    {
      files: ['pages/**/*.{ts,tsx}'],
      rules: {
        '@typescript-eslint/explicit-module-boundary-types': 'off',
        'react/display-name': 'off',
      },
    },
    {
      files: ['backend/api/**/*.ts'],
      rules: {
        '@typescript-eslint/explicit-module-boundary-types': 'off',
      },
    },
    {
      files: ['config/jest/test-utils.tsx'],
      rules: {
        '@typescript-eslint/explicit-module-boundary-types': 'off',
        'import/export': 'off',
      },
    },
  ],
};

[belgattitude]

I see, its maybe linked to vscode-eslint plugin config... cause as I see it, it does not complain on the command line

I'll keep this open for more investigation, but thanks for letting me know

[belgattitude]

@oste I have an intuition 😄

Is the config you suggest https://github.com/belgattitude/nextjs-monorepo-example#61-vscode actually works with wildcards ?

"eslint.workingDirectories": [
    {
        "pattern": "./apps/*/"
    },
    {
        "pattern": "./packages/*/"
    }
],

What would it give if you give an explicit list ?

"eslint.workingDirectories": [
    "./packages/package-1",
    "./packages/package-2",
    "./apps/yyy",
    "./apps/yyy"
],

When you mentioned the problem and showed me the link to vscode-lint + look like a "current working" directory that isn't right. My guts start to tell, looks so related to each others

I'm asking cause I want to isolate problems into categories, those linked to editors and those linked to eslint config.

Generally I proceed like this:

1. I ensure the eslint config is working in the monorepo (I mean outside of any editor, just plain eslint command, and ci checks. See the global lint script for example)
2. When problems are reported (there's always problem 😄), my idea before changing the code is to clearly define the why it's needed, so I can add a link to comment or choose a different direction. Because otherwise I won't remember :)