@next/next/no-html-link-for-pages rule does not work with pageExtensions

[nnmax]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.14.2
      npm: 9.8.1
      Yarn: 1.22.19
      pnpm: 8.3.1
    Relevant Packages:
      next: 13.4.13-canary.9
      eslint-config-next: 13.4.12
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

ESLint (eslint-config-next)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/nnmax/next-eslint-config-reproduction-app

To Reproduce

1. git clone https://github.com/nnmax/next-eslint-config-reproduction-app.git
2. cd next-eslint-config-reproduction-app
3. npm install
4. npm run lint
5. Observe the ESLint output from the terminal.

Describe the Bug

The @next/next/no-html-link-for-pages rule doesn't work after configuring custom pageExtensions.

Expected Behavior

It should recognize pageExtensions.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[balazsorban44]

Currently, the ESLint rule is indeed unaware of this configuration.

See

next.js/packages/eslint-plugin-next/src/rules/no-html-link-for-pages.ts

Line 95 in e757cac

const pageUrls = getUrlFromPagesDirectories('/', foundPagesDirs)

[nnmax]

Can I make a PR to accomplish this? I would be happy to help.

I readed the source code and found only one difficulty, how to get the user configured pageExtensions parameter. I have two ideas for this:

• Get the pageExtensions parameter from the user's next.config.js or next.config.mjs configuration file.
  • Use the loadConfig function to get the configuration. But unfortunately, this function is an async function, and the ESLint create function does not support async calls. So this solution does not work.
  • Read the configuration file via require(). If the user is only using the CommonJS and exporting a configuration object, this is easy enough to get the pageExtensions parameter. But if the user is using an ES Module or exporting a sync or async function, I can't get the pageExtensions parameter. Because the require() function doesn't support dynamic import of an ES Module. So this solution also fails.
• Provide an ESLint option named pageExtensions.
  • This is the only option that works so far.

This is my current idea, feel free to discuss it.

[abhishek1810]

Hello, I am new to open source and want to work on this issue. Do I need to get this assigned first or should I just fork and start working directly?

[jessfeliciano]

@abhishek1810

It looks like this is already being worked on for a duplicate ticket. Here's the PR: #51783

Maybe reviewing and commenting on that PR first would be helpful.

[DerickT02]

Is this still open? I would be happy to fix this issue if someone can guide me where in the project this error is being produced.