vercel / next-learn

Learn Next.js Starter Code
https://next-learn-dashboard.vercel.sh/
MIT License
3.63k stars 1.87k forks source link

Docs: learn -> improving-accessibility, missing something about accessiblity #838

Open bigliuliu opened 3 weeks ago

bigliuliu commented 3 weeks ago

I'm learning the chapter 14 about https://nextjs.org/learn/dashboard-app/improving-accessibility;

when I run pnpm lint what I expect No ESLint warnings or errors but I got Failed to load config "next/typescript" to extend from. Referenced from: C:\WorkBench\Sweet\Next\nextjs-dashboard\.eslintrc.json

Is there any context that might help us understand?

I'm using

"next": "15.0.0-canary.56" The .eslintrc.json file

{
  "extends": [
    "next/core-web-vitals",
    "next/typescript"
  ]
}
EvivNotrub commented 3 weeks ago

Hello; had the same issue and found a workaround on this nextjs forum And similar to the answer in the forum, with help of AI you can add this dependencies:

 pnpm add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-next

and modifiy the config .eslintrc.json: { "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"] ,"parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint"], "rules": { } } You can add some rules as well to avoid errors that are found by linter in the tutorial and not adressed: "@typescript-eslint/no-unused-vars": "off", But this does not fix the unused vars so it's not best practice, and it might be better to fix the unused vars in the components or write an exception inside of them: // eslint-disable-next-line @typescript-eslint/no-unused-vars But as someone with litle experience I might be missing some issues and lack a complete understanding of why it failed to load the config "next/typescript".

bigliuliu commented 3 weeks ago

@EvivNotrub thank you so much ,

I run

pnpm add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-next

still got error

`5:3 Error: 'ExclamationCircleIcon' is defined but never used. @typescript-eslint/no-unused-vars

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules  ELIFECYCLE  Command failed with exit code 1.`

then add some rules as you mentioned

"@typescript-eslint/no-unused-vars": "off",

it works !

bebigomez commented 3 weeks ago

One thing I noticed is that in the Configuring: ESlint doc the Strict config option does not contain "next/typescript" in the .eslintrc.json.