no-html-link-for-pages eslint rule uses cwd instead of project directory

[brandonchinn178]

What version of Next.js are you using?

11.0.1-canary.4

What version of Node.js are you using?

14.15.5

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

vercel

Describe the Bug

I have a project with separate directories for client and server (my project has two servers: nextjs and graphql), with the path client/next.config.js. Running eslint from the root directory using the next eslint plugin shows

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

This happens whether I add the plugin in the top-level .eslintrc or in the client/.eslintrc

Expected Behavior

Rule should look for pages directory in the same directory as next.config.js (or some other marker of a NextJS project). Alternatively, rule should look for pages directory in the same directory as the .eslintrc file it's added in.

To Reproduce

Create a NextJS project in a subdirectory and run linting from the parent directory.

[brandonchinn178]

To be clear, explicitly setting the path like

'@next/next/no-html-link-for-pages': ['error', 'client/pages']

works. But if possible, it would be great if the rule could automatically find the pages directory from the NextJS project root

[mrmckeb]

Hey @brandonchinn178, I'm currently working on something around this. Are you working from a monorepo? Or just a custom folder in a project?

[brandonchinn178]

Yes, I'm in a monorepo

[mrmckeb]

Great, I think the solution in #27918 will help - but I'm not sure about auto-detecting, as that's more error-prone.

Please let me know what you think.

[brandonchinn178]

Looks great! Are there any other rules this is applicable for? Even if not, it's good/it makes sense to have this as a global setting.

Is it possible to have it default to the location of the eslintrc file it's in? for my usecase, i wouldnt even need to set the setting then

[mrmckeb]

Are there any other rules this is applicable for?

I don't think so, but I imagine there will be - and like you, I think it makes more sense to have this as a global setting.

So the way we're rolling out our updated ESLint configs at Vercel is that we have a root config, and then use overrides to set any per-workspace settings. So everything is root-level in the monorepo.

I'm guessing (correct me if I'm wrong) that you're running ESLint from the root of the repo, but the ESLint config file is within the workspace. What happens if you run the ESLint command from within the workspace? I imagine that might work because ESLint's context would then be that workspace.

[brandonchinn178]

I'm guessing (correct me if I'm wrong) that you're running ESLint from the root of the repo, but the ESLint config file is within the workspace.

Yes, that's correct.

What happens if you run the ESLint command from within the workspace? I imagine that might work because ESLint's context would then be that workspace.

It would probably work, but I think it would break the dev workflow, or at least complicate the scripts that run eslint.

[mrmckeb]

Yes, I understand. I'll give it thought and see if there are any smart ways to automate this in future.

[jankaifer]

It seems that we don't have anything actionable now (it's not really a bug).
We will track it as a feature request in discussions.

[frenicohansen]

I got the same error after using the new app directory from Next.js 13 and deleted my old pages directory. I use eslint-config-next version 13.0.7

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

[ShahinSorkh]

Hey. Any updates here?

[mrmckeb]

Hi @ShahinSorkh, does this feature help solve the issue for you?
https://nextjs.org/docs/app/building-your-application/configuring/eslint#rootdir

It was delivered in this PR:
#27918

[Sadaqat507]

I am working in monorepo as react native and next.js . So icon.tsx gives me this type of github push error .Otherwise output in both plateform is correct Can you help me?

Errors=>
nx run mobile:lint
Linting "mobile"...
P:\exeonic\native\practies\nikah-mono\apps\mobile\src\app\screen\Top.tsx
5:1 error External resources cannot be imported using a relative or absolute path @nx/enforce-module-boundaries

nx run web:lint
Linting "web"...
Pages directory cannot be found at P:\exeonic\native\practies\nikah-mono\pages or P:\exeonic\native\practies\nikah-mono\src\pages. If using a custom path, please configure with the no-html-link-for-pages rule in your eslint config file.

  P:\exeonic\native\practies\nikah-mono\apps\web\src\app\page.tsx
    6:1  error  External resources cannot be imported using a relative or absolute path  @nx/enforce-module-boundaries