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

nnmax commented 1 year ago

Verify canary release

[X] 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

git clone https://github.com/nnmax/next-eslint-config-reproduction-app.git
cd next-eslint-config-reproduction-app
npm install
npm run lint
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 commented 1 year ago

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

See https://github.com/vercel/next.js/blob/e757cac3f4c9152209537f8274e29e41a470920b/packages/eslint-plugin-next/src/rules/no-html-link-for-pages.ts#L95

nnmax commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@abhishek1810

It looks like this is already being worked on for a duplicate ticket. Here's the PR: https://github.com/vercel/next.js/pull/51783

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

DerickT02 commented 1 year ago

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.

Santosh130602 commented 4 months ago

Hello @nnmax @balazsorban44 can i do on this issues becaus I thing I found the solution of this issues so can you please doing work on this issue

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

vercel / next.js